总体内容
1、background属性的解释
2、具体的举例
一、background属性的解释
background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：
- 1.1、
background-color设置背景颜色 - 1.2、
background-image设置背景图片地址
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background属性</title> <style type="text/css"> .box1{ width: 200px; height: 200px; border: 1px solid #000; margin: 50px auto 0; background-color: yellow; background-image: url("images/bg.jpg"); } </style> </head> <body> <div class="box1"></div> </body> </html>
默认设置一个图片地址，图片会从盒子的左上角开始将盒子铺满。
- 1.3、
background-repeat设置背景图片如何重复平铺,推荐一篇 background-repeat 相关播客
- (1)、no-repeat：背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色
.box1{ width: 200px; height: 200px; border: 1px solid #000; margin: 50px auto 0; background-color: yellow; background-image: url("images/bg.jpg"); background-repeat: no-repeat; }
- (2)、repeat：背景图像将向垂直和水平方向重复。这是默认,也就是上面看到的
1.3的现象 - (3)、inherit：指定background-repea属性设置应该从父元素继承
- (4)、round：background-repeat取值为round时，会像repeat一样，背景图片会平铺整个容器，但和repeat不一样的是，他会根据容器尺寸和图片尺寸做一个自适应处理，不会像repeat一样，造成图片显示不全。当图片重铺的次数不适合一个整数时，会重新调整，使图片按整数平铺在整个容器中。类似于
background-size一样会自动计算背景图片尺寸。
(5)、space：background-repeat取值为space时，和round又会不一样，但也有类似之处。类似之处是，背景图片会平铺整个容器，不会造成背景图片裁剪；但也和round将不一样，使用space时，不够整数背景图片平铺整个容器的时候，会将剩余的空间平均分配给相邻背景之间。假设我们的容器是200 x 200，而背景图片的尺寸是80 x 80。那么水平方向将会平铺2张背景图，而相邻两张背景图之间会有一个40/(2-1) = 40间距。同样道理，在垂直方向会有一个40/(2-1) = 40的间距。
(6)、repeat-x：横向平铺盒子，盒子其他部分显示背景颜色。
.box1{ width: 200px; height: 200px; border: 1px solid #000; margin: 50px auto 0; background-color: yellow; background-image: url("images/bg.jpg"); background-repeat: repeat-x; }
- (7)、repeat-y：纵向平铺盒子，盒子其他部分显示背景颜色
.box1{ width: 200px; height: 200px; border: 1px solid #000; margin: 50px auto 0; background-color: yellow; background-image: url("images/bg.jpg"); background-repeat: repeat-x; }
- 1.4、
background-position设置背景图片的位置，可以在水平方向设置left、center、right，在垂直方向设置top、center、bottom，除了设置这些方位词之外，还可以设置具体的数值，可以任意组合，举例如下：
- (1)、举例 1：水平居中，靠近底部
.box1{ width: 200px; height: 200px; border: 1px solid #000; margin: 50px auto 0; background-color: yellow; background-image: url("images/bg.jpg"); background-repeat: no-repeat; background-position: center bottom; }
(2)、举例 2：设置具体的数值
提示：background-position 后面跟两个参数是代表水平和垂直方向的设置
- 1.5、
background-attachment设置背景图片是固定还是随着页面滚动条滚动
提示：实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“
background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。
二、具体的举例
- 2.1、通过雪碧图来做如下布局：
- 雪碧图
- 2.2、代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪碧图的制作</title> <style type="text/css"> .box{ background-color: yellow; width: 300px; height: 315px; list-style: none; margin: 50px auto 0; padding: 0px; } .box li{ height: 60px; border-bottom: 1px dotted #000000; line-height: 60px; text-indent: 50px; background: url(images/bg01.png) 0px 10px no-repeat; } .box .icon2{ background-position: 0px -71px; } .box .icon3{ background-position: 0px -154px; } .box .icon4{ background-position: 0px -235px; } .box .icon5{ background-position: 0px -315px; } </style> </head> <body> <ul class="box"> <li>飞驰人生</li> <li class="icon2">飞驰人生</li> <li class="icon3">飞驰人生</li> <li class="icon4">飞驰人生</li> <li class="icon5">飞驰人生</li> </ul> </body> </html>
分析：5个
li本来要加载5张图片，由于我们使用的雪碧图在重复利用，改变的是同一张图片的background-position,从而减少请求来获取图片的效果
