CSS 可以添加背景颜色和背景图片，以及来进行图片设置。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等等。
属性描述background-color背景颜色background-image背景图片的地址background-repeat图片是否平铺background-position背景位置background-attachment背景固定还是滚动背景的合写（复合属性）background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置background-color属性定义了元素的背景颜色。 语法： background-color:颜色值; 注意： 一般情况下，元素背景颜色默认值是transparent（透明）
background-image描述背景的图片。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置。 语法：
background-image : none | url (url)参数： none : 无背景图（默认的） url : 使用绝对或相对地址指定背景图像
小技巧： 我们提倡 背景图片后面的地址，url不要加引号。
注意： background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复的话，图片覆盖不到的地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。 背景颜色会置于底层，在背景图片下。
background-repeat 属性可以设置背景图片的平铺。
background-repeat : repeat | no-repeat | repeat-x | repeat-y 参数值描述repeat背景图像在纵向和横向上平铺（默认的）no-repeat背景图像不平铺repeat-x横向平铺repeat-y纵向平铺设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
利用background-position属性可以改变图片在背景中的位置。 语法：
background-position : length || length background-position : position || position 参数作用length百分数positiontop 、center 、 bottom | left 、 center 、 right ——方位名词说明：
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。 如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
注意：
position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。语法：
background-attachment : scroll | fixed 参数描述scroll背景图像是随对象内容滚动fixed背景图像固定说明： 设置或检索背景图像是随对象内容滚动还是固定的。
背景可以设置透明度，与文字的透明同理。
background-color: grba ( 0, 0, 0, 0.3 ) /* 取值范围 0~1之间 */注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
同理，文字与边框也可以设置半透明
color : grba ( 0, 0, 0, 0.3 ) border : 1px, solid grba ( 0, 0, 0, 0.3 )为了把代码简洁、方便、美观，方便后续维护，建议把背景样式简写在同一段代码上。
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;背景可以设置大小，可设置长度单位或者百分比
background-sizi : 100px 200px 或者 50% cover: 等比例缩放大小，如有溢出部分则会被隐藏。不会显示出来，但是会让图片不完整。 background-sizi ： cover; contain : 按容器的大小来缩放，只要满足一个边就会停止缩放，但是不满足的那一边会有空白边多出来，此方法可保证图片的完整度。 background-sizi ： contain;注意： 背景图片大小尽量只写一个数值或用百分比，防止图片缩放导致失真，扭曲。
简写：
background-image: url('images/gyt.jpg'), url('images/robot.png');需要用文字阴影来设置效果。
.tu{ text-shadow: -1px -1px 1px #fff,1px 1px 1px #000; } .ao{ text-shadow: 1px 1px 1px #fff,-1px -1px 1px #000; }在CSS中，使用 text-decoration属性，可以在文本上方、下方、或中间添加装饰线。 在正常情况下，文字是没有装饰的，但是 a 标签，超链接除外
a 标签 超链接中，默认自带下划线，但是如果把下划线取消的话，需要设置 none a { text-decoration: none; } /* 去掉下划线 */具体 参数：
参数效果none默认，定义标准的文本underline定义文字下方的一条线overline为文字上方添加一条线line-through文字中间贯穿线 ， 定义穿过文本的一条线blink闪烁可做文字效果：
去掉超链接的下划线，当鼠标悬停后，再为文字添加下划线，来提醒用户当前文本为链接文本。如： a:hover { text-decoration: underline; } 可做修订文本，在被删除文本上增加删除线。还有团购网站，在原价上增加删除线，做删除状。 p { text-decoration: underline overline line-through; }效果如下 ：
css 层叠，是多种样式的叠加。
如在一个页面中，有一个div文字第一个标注写了颜色为红色 ，但是下面又有样式为蓝色，这样为多种样式叠加。 这样就会出现一个属性把另外一个属性的样式重叠。一般情况下，如出现这种冲突的情况，则会按照css的书写顺序，按最后面的样式为准。* 就近原则
.red { color : red; } .red { color : blud; } /* 就近原则。识别为蓝色子标签会继承父标签的某些样式，如文本颜色和字号等。
子承父业。
继承性：如果页面中有div, 后面跟有 ul ——Li 如果只书写div 的样式属性时，那么此时li 也会识别到div的属性。子标签会继承父标签的某些样式 ，简单的理解就是： 子承父业。元素可以继承父元素的样式（text-,font-，line-这些元素开头的都可以继承，以及color属性） <div> <ul> <li> 子元素继承父元素的属性 </li> </ul> </div>定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
继承的权重为 0行内样式优先权重、样式相同时，就近原则！important 具有最大优先级。值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
继承或者*的值：0，0，0，0每个元素（标签）值：0，0，0，1每个类，伪类值为：0，0，1，0每个ID为：0，1，0，0每个行内样式值：1，0，0，0每个 ! important值：无穷大注意： 数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10而不是0,0, 1, 0， 所以不会存在10个div能赶上-一个类选择器的情况。
总结优先级：
使用 ! important声明的规则内嵌在HTML元素的sytle属性里面的声明使用了ID选择器的规则使用了类选择器、属性选择器、伪元素和伪类选择吕的规则使用了元素选择器的规则只包含一个通用选择器的规则特点： 权重是优先级的算法， 层叠是优先级的表现。
耐心总结，快乐分享，欢迎讨论。
