（三）CSS的背景属性及特性

0. 一个小技巧——单行文字垂直居中

解决方案：让文字的行高等于盒子的高度

（行高等于文字高度加文字上下到边框的距离 意味着：上边框 + 文字 + 下边框 == 行高）

原理分析：行高=文字本身高度+上空隙+下空隙=盒子高度

当行高小于盒子高度，则文字偏上；当行高大于盒子高度，文字偏下

1. CSS 的背景

CSS 背景属性可以给元素添加背景样式

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

1.1 背景颜色

background-color 定义了元素的背景颜色

background-color: 颜色值;

一般而言，颜色默认值默认是 transparent（透明），我们也可以指定背景颜色为透明色或其他色

1.2 背景图片

background-image 属性描述了元素的背景图像，实际开发用于 logo 或者一些装饰性开发的小图片或者是超大的背景图片，优点是便于控制位置。（也用于精灵图）

background-image: none|url(图片url);

1.3 背景平铺

若需要在 HTML 页面上对背景图进行平铺，可以使用 background-repeat 属性

background-repeat: repeat(默认) | no-repeat | repeat-x | repeat-y;

页面元素既可以添加背景图片，也可以添加背景颜色，图片会覆盖颜色

PS：注意 平铺是把整个格子占满！

1.4 背景图片位置

background-position 可以改变图片在背景中的位置

background-position: x y;

参数 x 和 y 指 x 左边和 y 坐标，可以使用方位名词或者精确定位

参数值	说明
length	百分数 / 由浮点数字和单位字符组成的长度值
position	top / center / bottom / left / center / right 方位名词

1. 参数是方位名词

• 若两个值都是方位名词，则两个值前后顺序无关，比如 left top和 top left 效果一致
• 若只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

1. 参数是精确单位

• 第一个必定是 x 坐标，第二个是 y 坐标
• 若只指定一个数值，则另一个必定是 y 轴居中

1. 参数是混合单位

• 若是混合单位，则第一个值是 x 坐标，第二个值是 y 坐标

1.5 背景图像固定

background-attachment 属性设置背景图像是否随着页面其余部分滚动

background-attachment 后期可以制作视差滚动效果

background-attachment: scroll | fixed;

参数	作用
scroll（滚动）	背景图像随着对象内容滚动
fixed（固定的）	背景图像固定

1.6 背景属性复合写法

简化代码，将属性写在同一个属性 background 下

没有特定的书写顺序，一般按照约定顺序编写

background 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

background: transparent url(image.jpg) repeat-y fixed top;

1.7 背景颜色半透明

CSS3 提供 background: rgba(r,g,b,a) 属性设置图片透明度

background: rgba(0, 0, 0, 0.3);

• 最后一个参数是 alpha 透明度，取值范围在 0~1 之间
• 我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
• 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
• CSS3 新增属性，IE9+支持

1.8 背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position分别是x和y坐标
background-attachment	背景附着	scroll(背景滚动) /fixed(背景固定)
背景简写	书写更简单	背景颜色背景图片地址背景平铺背景滚动背景位置;
背景色半透明	背景颜色半透明	background: rgba(0,0,0,0.3);后面必须是4个值

背景图片：实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。(精灵图也是一种运用场景)

2. CSS 的三大特性

CSS 有三个非常重要的特性：层叠性、继承性、优先级

2.1 层叠性

相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则：

• 样式冲突：遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
• 样式不冲突，不会层叠

2.2 继承性

CSS 中子标签会继承父标签的某些样式，如文本颜色和字号。

• 恰当使用继承可以简化代码，降低 CSS 的复杂性
• 子元素可以继承父元素的样式（text-, font-, line-这些元素开头的可以继承，以及 color 属性）

2.2.1 行高的继承性

body { font: 12px/1.5 Microsoft Yahei; }

• 行高可以跟单位也可以不跟（跟上单位时，父元素行高即为子元素行高）
• 如果子元素没有设置行高，则会继承父元素的行高为 1.5
• 此时子元素的行高是：当前子元素的文字大小 * 1.5
• body 行高 1.5 这样写法最大优势就是里面的子元素可以根据文字大小自动调整行高

2.3 优先级

当一个元素指定多个选择器时，就会有优先级的产生

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

选择器权重如下所示：

选择器	选择器权重
继承或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID 选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important	∞ 无穷大

通配符选择器高于继承，伪类选择器高于类选择器

important>style="">id>class>元素>*>浏览器>继承

p { 
    color: pink !important; 
}

注意

• 权重是有 4 组数字组成，权重永远不会有进位！（所以元素选择器的权重永远不会比 类选择器大！）
• a 链接，浏览器默认指定了一个样式，所以从父元素中继承下来的样式无效
• 权重可以叠加，需要计算权重，但是没有进位
• 继承的权重是 0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0

---

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重

• div ul li ------> 0,0,0,3
• .nav ul li ------> 0,0,1,2
• a:hover -----—> 0,0,1,1
• .nav a ------> 0,0,1,1 ⁴⁵

综上所述：范围小，权重大（范围越精确，权重越大！）