烟台优化网站排名杭州seo网站排名
目录：css背景、css三大特性
参考：css2.0中文手册
1、css的背景background（复合属性5个，+1个（背景色半透明），没有特定书写顺序，一般按手册顺序）常用，img标签插入图像不常用（因为无背景的属性）
①背景图片background-image属性：
（控制位置是因为有位置的属性，大的图片比屏幕大，若用img则放不开不能调位置，用背景则显示核心部分。下图：王者荣耀官网）
注意：同时添加背景图片和背景颜色，背景图片会压住背景颜色
②背景位置background-position：
注意：参数若为position方位名词，则两个值前后顺序无关，例如right，center与center（自然竖直为中），right（隐含水平意思）一样；若参数值是精确坐标length或者方位名词和精确坐标两者混合，则第一个一定是x，第二个一定是y
例子：
；大背景图片
③背景固定background-fixed：用来生成视差滚动的效果（下图：qq官网）
注意： 背景属性设置到盒子上，比如body、div等，然后盒子的对象内容相对背景图片是否固定；而背景属性中的color和image是对于此盒子color在底，image在上
④css3中加了背景色半透明效果，写法background:rgba(0,0,0,0.3);
注意：rgb（0,0,0）是黑色（记忆：反比），a为0是完全透明（记忆：正比），1为完全不透明；
注：很多背景装饰图片打开是在一个大图片上，这个是精灵图，也是用背景来做
2、案例
注意：一个大盒子，放了行内块元素链接a。对a进行行内块元素宽高、text、font、背景（分别设置），以及链接伪类选择器的背景（分别）设置即可。
其中，垂直居中小于行内块元素a的高度，则整体上移。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav a{display: inline-block;width: 120px;height: 58px;text-align: center;line-height: 48px;text-decoration: none;color: white;}.nav .bg1 {background-image: url(images/bg1.png);} .nav .bg1:hover {background-image: url(images/bg11.png);} .nav .bg2 {background-image: url(images/bg2.png);} .nav .bg2:hover {background-image: url(images/bg22.png);} </style>
</head>
<body><div class="nav"><a href="#" class="bg1">五彩导航</a><a href="#" class="bg2">五彩导航</a></div></body>
</html>3、css三大特性
注意：跟文字相关的能继承，包括行高，但是高度，内外边距都不能继承
应用场景：比如搜狐里面大部分字体颜色一样，不用挨个指定颜色，可以给body指定颜色即可，简化代码
（常用）
注：层叠性是同一元素相同选择器指定相同样式；优先级是同一元素多个不同选择器
注：书写方式，color:red!important；
继承的权重为0的意思是子元素指定样式后并不会继承父元素的样式，两者权重互不干扰，而第二个特性继承性中说的是子元素未指定样式，会继承父元素的某些样式。可解释为什么在body设置color后，在其中的a标签仍然是蓝色，说明a链接浏览器默认设置了color为蓝 且有下划线；
若有10个标签选择器累加，则不会有进位，结果是0,0,0,10
4、css盒子模型
注：每个标签都是盒子，网页布局就是准备标签，往盒子装文字、图片等内容，设置盒子的css样式即宽高、居中等。