一：三大特性
1.概述
层叠性
继承性
优先级
2.层叠性
只有冲突了才有重叠，如果没有冲突，则没有重叠
有了重叠，按照css的顺序来，执行后面的样式
3.继承性
子标签会继承父标签的某些样式，如文本颜色和字号
子承父业
一般，子元素继承父元素的样式：text-，font-，line-这些元素开头的都可以，以及color
4.优先级
继承或者*的贡献值 0,0,0,0
每个元素的贡献值 0,0,0,1
每个类和伪类的贡献值 0,0,1,0
每个Id贡献的值 0,1,0,0
每个行内样式贡献值 1,0,0,0
每个！import的贡献值 无穷大
5.权重叠加
二：背景
1.是否平铺
background-repeat
属性有：
repeat：纵向与横向平铺
no-repeat：不平铺
repeat-x：在横向上平铺
repeat-y：在纵向上平铺
2.案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body { 8 background-image: url(image/af4.jpeg); 9 background-repeat: no-repeat; 10 } 11 </style> 12 </head> 13 <body> 14 15 </body> 16 </html>
3.效果
4.位置
background-position
参数：
length：百分数，或者由浮点数和单位标识组成的长度值
position：top，center，bottom，left，right
三：背景图片实践
1.需求
大图片1920*1080
一般网站的图片都比较大，是为了更好的体验，为了那些大屏幕。
要怎么做呢？
看看下面的案例。
2.案例
水平center，纵向top。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body { 8 background-image: url(image/3567.jpg); 9 background-position: center top; 10 background-repeat: no-repeat; 11 background-color: #000; 12 } 13 </style> 14 </head> 15 <body> 16 </body> 17 </html>
3.效果
四：背景固定
1.background-attachmeng
设置或检索背景图像是随着对象内容滚动还是固定的
属性有：
fixed：背景是固定的
scroll：默认是滚动的
2.背景简写
没有特殊的要求
背景颜色，背景图片，是否平铺，是否滚动，背景位置
background:transparent url() repeat-y scroll 50% 0;
五：购物车
1.效果
在鼠标移动到图片上面，用户变成登录
图片大小为263*109
2.程序
主要考虑在盒子里，如何让图片展示一个部分。就是对齐部分。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 a { 8 width: 131px; 9 height: 109px; 10 background:url(image/903.png) no-repeat left top; 11 display: block; 12 } 13 a:hover { 14 background-position: right bottom; 15 } 16 </style> 17 </head> 18 <body> 19 <a href="#"></a> 20 </body> 21 </html>
3.效果
----------------------
六：背景透明
1.语法格式
background：rgba()
盒子透明
0-255 red green blue
0-1为透明度
2.案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body { 8 background-color: pink; 9 } 10 div { 11 width: 200px; 12 height: 200px; 13 /*background-color: #000;*/ 14 background: rgba(0,0,155,0.2); 15 } 16 </style> 17 </head> 18 <body> 19 <div> 20 我是div内容 21 </div> 22 </body> 23 </html>
3.效果
