项目十四 背景属性
项目要求
项目展示
项目展示分别如图14.1、14.2所示。
图14.1 项目一展示
图14.2 项目二展示
教学内容
CSS背景属性可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等，如表14.1所示。
表14.1 背景属性
1. 背景颜色（background-color）
background-color 定义了元素的颜色。语法：
background-color：颜色值；
一般情况下，默认背景颜色值是transparent（透明）。
颜色值：可以是颜色单词、十六进制、RGB值等W3C允许的颜色值。
使用十六进制代码，即使用6个十六进制数字。
使用 RGB，即使用RGB指定每个颜色的亮度，数字介于0到255之间。
2. 背景透明
CSS3支持背景半透明的写法，语法格式：
background：rgba（0，0，0，.5）；
最后一个参数是alpha 透明度，取值范围0～1，或者用opacity：
background-color：#000；
opacity：0.5；
3. 背景图片（background-image）
background-image属性描述元素的背景图像，语法：background-image：none | url（url）
背景图片属性如表14.2所示。
背景-背景颜色
背景-背景图片
表14.2 背景图像的属性
小技巧：背景图片后面的地址，url不要加引号。
提示：
CSS3中background-image 属性允许指定一个或多个图片展示在背景中，可以和backgroundcolor连用，背景图片会压在背景颜色上面，如图14.3所示。
❖ 当图片不重复，图片覆盖不到的地方都会被背景色填充；
❖ 当背景图片平铺时，则会覆盖背景颜色。
图14.3 背景颜色和背景图片连用
背景颜色和背景图片连用代码如下：
4. 背景平铺（background-repeat）
语法：background-repeat：repeat | no-repeat | repeat-x | repeat-y
背景平铺的属性如表14.3所示，其案例如图14.4所示。
表14.3 背景平铺的属性
图14.4 背景平铺
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
repeat-x：背景图像在横向上平铺。
repeat-y：背景图像在纵向平铺。
5. 背景位置（background-position）
语法：background-position：length
length：百分数 | 由浮点数字和单位标识符组成的长度值，请参阅长度单位。
background-position：position
position：top | center | bottom | left | center | right
说明：
若设置或检索对象的背景图像位置，必须先指定background-image属性，默认值为：（0%0%）。
如果只指定了一个值，该值将用于横坐标X，纵坐标Y将默认为50%。
如果指定了两个值，第一个值将用于横坐标X，第二个值将用于纵坐标。
背景位置参数值如表14.4所示，案例如图14.5所示。
背景-背景定位
大图居中靠上
表14.4 背景位置参数值
图14.5 背景位置参数值12px 50px
总结：
position后面是x坐标和y坐标，可以使用方位名词或者精确单位。
① 参数是方位名词。如果两个值都是方位名词，则两个值前后顺序无关。
比如：background-position：right top；等同background-position：top right；
如果只指定了一个方位名词，另一个值省略，则默认第二个值居中对齐。
② 参数是精确单位。
如果两个值都是精确单位，则第一个是x坐标，第二个是y坐标。
如果只指定了一个数值，那么该数值一定是x坐标，Y坐标默认垂直居中。
③ 参数是混合单位。
如果精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。
比如：background-position：15px top；则15px一定是x坐标，top是y坐标。
通过设置背景图片位置，让图片中间核心位置得以展示，案例如图14.6所示。
6. 背景图像固定/附着（background-attachment）
背景图像固定/附着用于设置或检索背景图像是随对象内容滚动还是固定的。
语法：
background-attachment : scroll | fixed
参数：
scroll：背景图像随对象内容滚动（默认的）。
图14.6 背景位置前和设置靠上居中后
fixed：背景图像固定。
说明：背景固定效果参考：https://im.qq.com/。
7. 背景连写（background）
为了简化代码，这里将以上属性合并简写在background属性中，简写属性书写顺序官方并没有强制标准。
为了可读性，推荐写法如表14.5所示。
背景固定和连写
表14.5 背景连写
如：background：#FFF url（image.jpg）no-repeat scroll center top ；
8. 背景尺寸（background-size）
背景尺寸
语法：
background-size：cover | contain
参数：
cover：把背景图像扩展到足够大，使背景图片完全覆盖背景区域。
contain：把图像扩展至最大尺寸，保证背景图片在背景区域内全部可见。
百分比：以父元素的百分比来设置背景图的宽度和高度。第一个是宽度，第二个是高度。只写一个值，另一个默认为auto。
像素值：设置背景图高度和宽度。第一个是宽度，第二个是高度。只写一个值，另一个默认为auto。
背景尺寸设置案例如图14.7所示。
图14.7 背景尺寸设置
9. 多重背景
多个图片背景设置时，属性值之间用逗号“，”隔开，越往前的层级越高（越在上层）。
多图像背景、设置案例如图14.8所示。
多重背景
图14.8 多图像背景设置
10. 背景渐变
语法：
background：linear-gradient（direction，color1，color2 [stop]，color3...）；
direction：表示线性渐变的方向
（1）渐变方向终点（到哪里结束）。
to left：设置渐变为从右到左。
to bottom：设置渐变从上到下，为默认值。
to right：设置渐变从左到右。
to top：设置渐变从下到上。
（2）方向起点（从哪里开始）。
top：设置渐变从上到下，为默认值。
bottom：设置渐变从下到上。
left：设置渐变从左到右。
right：设置渐变从右到左。
（3）角度（angle）。
角度用数字+单位来进行表示，单位使用deg。所有的颜色都是从中心出发，0deg是to top的方向，顺时针是正，逆时针是负，如图14.9所示。
该属性需要css3中的兼容前缀，如图14.10所示。
背景渐变说明如图14.11所示。
多个渐变颜色的案例如图14.12所示。
背景线性渐变
图14.9 渐变的角度
图14.10 兼容前缀
图14.11 背景渐变说明
图14.12 背景渐变案例
项目训练