背景的基本属性

背景颜色：background-color

通过“background-color”属性设置元素的背景颜色，属性值可以为对应颜色的用英文名称或rgb值或十六进制值。

 英文名称：background-color: red;rgb值：background-color: rgb(0, 255, 128);十六进制值：background-color: #bcbc12;

背景图片：background-image

我们不仅可以给元素设置背景颜色，还可以通过设置“background-image”属性来给它设置背景图片。图片的路径可以为本机地址，也可以为一个网络链接。然后，设置元素的宽高与图片的宽高相对应，就可以将图片完美的显示出来了。

 div {width: 300px;height: 300px;background-image: url(图片路径);}

背景铺盖：background-repeat

背景铺盖主要跟图片背景一起用，因为纯色背景就没什么铺盖的必要了。

属性值	作用
repeat	背景图像在垂直方向和水平方向重复，默认。
repeat-x	背景图像在水平方向重复
repeat-y	背景图像在垂直方向重复
no-repeat	背景图像只显示一次
inherit	继承父元素的 background-repeat 属性值

背景大小：background-size

当我们所用的图片太大或者太小的时候，可以通过“background-size”属性来设置背景图片的大小。此时要记得等比例压缩或放大，否则画面不忍直视。

背景固定：background-attachment

通过“background-position”属性可以设置背景对页面滚动的反应。

属性值	作用
scroll	背景图片随着页面的滚动而滚动，默认。
fixed	背景图片不会随着页面的滚动而滚动，此时图像定位时参照的就是页面了，可能不会在元素中显示出来或仅显示一部分。
local	背景图片会随着元素内容的滚动而滚动。
inherit	继承父元素的 background-attachment 属性值

背景定位：background-position

设置的背景图片默认是从元素的左上角开始的，但是我们可以通过设置"background-position"属性来移动图片的位置。注意，此处的定位是相对于元素的，相对于元素左上角的！

属性值	使用方法
left top	通过top、bottom、left、right、center五个英文单词两两组合来设置图像的位置
50px 50px	通过数值来设置图片的位置，数值的单位是像素、百分比等
inherit	继承父元素的 background-position 属性值

示例

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div:nth-of-type(1) {width: 1280px;height: 720px;background-size: 640px 360px;background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);background-position: left bottom;background-repeat: no-repeat;background-color: yellow;}div:nth-of-type(2) {width: 2560px;height: 1440px;background-color: red;background-size: 1280px 720px;background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);background-repeat: no-repeat;background-attachment: fixed;}div:nth-of-type(3) {width: 2560px;height: 1440px;background-size: 1280px 720px;background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);background-repeat: repeat;}div:nth-of-type(4) {width: 2560px;height: 1440px;background-color: red;background-size: 1280px 720px;background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);background-position: 50% 60%;background-repeat: no-repeat;}</style></head><body><div>背景定位一</div><div>背景固定</div><div>背景铺盖及大小设置</div><div>背景定位二</div></body></html>

总结

本文总结了一些背景设置的基本属性，基本能满足平时的使用需求，下一篇文章会涉及到背景的渐变设置，滤镜等。

文中若有不当之处，欢迎各位朋友批评指正。

HTML中的背景设置（上）相关推荐

Flex 4中组件背景设置（填充方式）group为例子
以下以Group为例子讲述如何在Flex 4中填充背景颜色.图片:1.图片填充方式:<s:Group x="0" y="0" height="1 ...
Java中表格背景设置透明
JTable添加背景图片 import java.awt.Component; import java.awt.Container; import javax.swing.ImageIcon; imp ...
Arcgis中把背景值为0的图像背景改为nodate
Arcgis中把背景值为0的图像背景改为nodate 在ENVI中做一些步骤的时候,可能需要把背景去除,而不是仅仅地改为0. -----------------------------------分割 ...
html中怎么设置渐变颜色设置,css中渐变色怎么设置
这篇文章主要介绍了css3编写浏览器背景渐变背景色的方法,现在分享给大家,也给大家做个参考. css中渐变色怎么设置 css 给网页中的背景设置渐变色,css的渐变颜色可以指定固定的两个颜色之间的线性 ...
前端入坑第六弹——CSS的复合选择器和背景设置
又是好几天没更新了,今天我来介绍一下CSS里面的复合选择器以及网页中的背景设置. 复合选择器比起一般的基础选择器,复合选择器能够更准确.更高效地定位网页元素. 后代选择器后代选择器可以对于父元素里 ...
html设置布局颜色设置,css布局中置背景颜色
css机关中不论是设置装备摆设后台色调照常布景图片,都是运用background来完成.这里CSS5为大家通俗简单颠末图文教程让各人驾驭css bac千克round配景花式. 一.语法与结构 1.语法 ...
html语言设置网页背景,HTML+CSS入门设置网页中的背景图片的5个属性
本篇教程介绍了HTML+CSS入门设置网页中的背景图片的5个属性,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 在css代码中设置背景图片的方法,包括背景图片.背景重复 ...
css编程设置网页背景,网页中cssbackground背景图和背景颜色的设置方法
CSS 背景这里指通过CSS对对象设置背景属性,如网页中通过CSS设置背景各种样式. Css background背景作用:设置纯色背景.背景background可以设置对象纯色的背景颜色,设置图为背 ...
简历背景图片设置html代码,怎么在简历中添加背景图片
在简历中添加背景图片的方法二步骤1.在菜单栏选择图片->自来文件->选择图片后->确定; 步骤2.选图片->右键-->设置图片格式->版式->衬于文字下方; ...

HTML中的背景设置（上）