CSS 可以添加背景颜色和背景图片,以及来进行图片设置。
说明:

一、background-color 背景颜色
可以使用该属性给一个元素定义背景颜色。
语法:
background-color: color 值;
color 值可以是颜色单词,十六进制等 W3C 允许的颜色值。
背景透明(CSS3):
语法:
background: rgba(0,0,0,0.3);
最后一个参数是 alpha 透明度 取值范围 0~1 之间。
Tips: 背景半透明是指盒子背景半透明, 盒子里面的内容不受影响。
二、background-image 背景图像
该样式属性用于设置背景图片。
语法:
background-image : none | url (url)
- none:表示默认值,没有背景图;
- url : 使用绝对或相对地址指定背景图像;
Tips:background-image 属性允许指定一个图片展示在背景中(只有 CSS3 才可以多背景)可以和 background-color 连用。
如果图片不重复的话,图片覆盖不到的地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。
扩展:
- GIF 格式图像可以设计动画、透明背景,图像小巧等优点;
- JPG 格式图像具有更丰富的颜色数,图像品质相对要好;
- PNG 类型综合了 GIF 和 JPG 两种图像的优点,不足就是占用空间相对要大;
三、background-repeat 背景平铺
该样式属性用于设置背景图片的平铺方式。
语法:
background-repeat : repeat | no-repeat | repeat-x | repeat-y | round | space
- repeat: 背景图像在纵向和横向上平铺(默认的)
- no-repeat: 背景图像不平铺
- repeat-x: 背景图像在横向上平铺
- repeat-y: 背景图像在纵向平铺
- round:背景图像自动缩放直到适应且充满整个容器。(仅 CSS3 支持)
- space:背景图像以相同的间距平铺且填充满整个容器或某个方向。(仅 CSS3 支持)
- 设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。
四、background-position 背景位置
该属性用于设置背景图片的位置。
语法:
background-position : length || length
background-position : position || position
- length : 百分数 | 由浮点数字和单位标识符组成的长度值。
- position : top | center | bottom | left | center | right (方位名词)
说明:
设置或检索对象的背景图像位置时,必须先指定 background-image 属性。默认值为:(0% 0%)。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50%。第二个值将用于纵坐标。
注意:
-
position 后面是 x 坐标和 y 坐标。 可以使用方位名词或者 精确单位。
-
如果和精确单位和方位名字混合使用,则必须是 x 坐标在前,y 坐标后面。比如 background-position: 15px top; 则 15px 一定是 x 坐标 top 是 y 坐标。
-
方位名字可以没有顺序,但是精切单位第一个为 x 坐标,第二个 为 y 坐标。
扩展:在网页中的坐标轴和现实生活中的坐标轴不同。在网页中左上角为原点,X 轴的正方向指向右方,Y 轴的正方向指向下方,Z 轴的正方向是从屏幕向外的。
在给背景图指定位置时,一定到注意到方向和正负值。

五、background-attachment 背景附着
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
通过 该属性可以 防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响。
语法:
background-attachment : scroll | fixed | local
- scroll: 背景图像是随对象内容滚动,默认值
- fixed: 背景图像固定
- local: 背景图图像相对于元素内容固定,就是当元素内容滚动时背景图像也会跟着滚动,此时不管元素本身是否滚动,当元素显示滚动条时才会看到效果。(仅 CSS3 支持)
- 设置或检索背景图像是随对象内容滚动还是固定的。
六、background 背景简写
background 属性的值的书写顺序官方并没有强制标准的。为了可读性,建议大家如下写:
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: color url(image.jpg) repeat-y scroll 50% 0 ;
七、background-size 背景缩放(CSS3)
通过该属性设置背景图片的尺寸,就像设置 img 的尺寸一样,在移动 Web 开发中做屏幕适配应用非常广泛。
语法:
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */
- 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)
- 设置为 cover 时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。平时用的 cover 最多。
- 设置为 contain 会自动调整缩放比例,保证图片始终完整显示在背景区域
八、多背景(CSS3)
CSS3 支持多背景图的。以逗号分隔可以设置多背景,可用于自适应布局,每个 url 用逗号隔开就好了。
语法:
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px ,
url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
url(test1.jpg) no-repeat scroll 10px 20px/110px 130px #aaa;
- 一个元素可以设置多重背景图像。
- 每组属性间使用逗号分隔。
- 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。
- 为了避免背景色将图像盖住,背景色通常都定义在最后一组上。
九、background-clip 背景裁剪(CSS3)
该属性定义背景图像的裁剪区域。
语法:
background-clip: border-box | padding-box | content-box | text;
- border-box:从边框区域向外裁剪背景;(默认值)
- padding-box:从补白区域向外裁剪背景;
- content-box:从内容区域向外裁剪背景;
- text:从前景内容区域向外裁剪背景;
十、background-origin 背景坐标(CSS3)
background-position 这个属性总是根据元素左上角为坐标原点进行定位背景图像。使用 background-origin 属性可以改变这种定位方式。
语法:
background-origin: border-box | padding-box | content-box;
- border-box:从边框区域开始显示背景;
- padding-box:从补白区域开始显示背景;(默认值)
- content-box:仅在内容区域显示背景;