4.css-background属性

1.backgroung-color：背景颜色，取值与color一样

2.background-image：url();

注意：（1）图片地址可以是本地的，也可以是网络的地址。（2）如果图片大小没有标签大小大，那么会自动在水平方向和垂直方向上平铺和填充。（3）如果网页上出现图片，那么浏览器会再次发送请求获取图片。

3.background-repeat：repeat/repeat-x/repeat-y/norepeat

repeat的应用场景：由于网页加载图片的原理是浏览器向服务器发送请求，故图片越大，速度越慢，时间越长，用户体验越差，故如果背景图片是那种纯色或者填充图案有规律，那么我们就可以使用repeat这种属性，即可以达到效果，速度也快了很多。

注意：在一个标签中可以同时设置背景颜色和背景图片，如果背景图片和背景颜色共存，那么图片会覆盖颜色

4.background-position：X方向，Y方向。其中X方向可以取left、right、center；Y方向可以取top、bottom、center。通过X方向的三种和Y方向的三种进行组合，就可以对图片进行九个位置的定位。当然，这个X方向和Y方向也可以取具体的值，比如.background-position：100px 200px是指距离标签左边100px，距离标签顶部200px，注意这个值也可以取负值。

应用场景：

有这样一种情况，不同用户的电脑分辨率是不同的，而在网页背景图片设计的时候，总不能设计很n图片，那么怎么解决一张图片就能满足大多数用户的问题呢？这个时候有两种办法插入这张图片，第一：在html中插入img标签，带来的问题是浏览器有横向滚动条，而这时一种非常垃圾的做法，故放弃。第二种方法是把图片作为某个标签的背景，但要注意的是，这个标签的宽度要和显示屏的分辨率一样宽，即不设置这个标签的宽度，让它自动填满即可。背景图片设计者会设计一张比较大的图片，但是关键的信息是在中间的，左右两边的信息没有那么重要，而前端开发者只需要把这个图片的关键信息即中间那一部分给展示出来即可，那么我们就用到了background-position:center,top;这个时候，分辨率小的电脑能够显示图片居中的信息，分辨率大的电脑，可以显示两边没有那么重要的信息。

5.background:背景颜色，背景图片，平铺方式，关联方式，定位方式。

注意，该缩写方式中，任何一个属性都可以省略

什么是关联方式？在网页中，背景图片会随着滚动条的滚动而滚动，而能够使背景图片钉在那里的方法就是使用关联方式，background-attachment:scroll/fixed；默认值是scroll，fixed可实现钉在某个位置。这个作为了解，开发中不建议使用这个方法。

6.背景图片与插入图片的区别。

（1）背景图片仅仅是一个装饰，不占用位置。插入图片会占用位置。

（2）背景图片自带定位属性，方便控制图片位置。而插入图片并不自带这种属性。

（3）插入图片的语义比背景图片的语义强，所以在企业开发中你的图片想被搜索引擎收录，那么推荐使用插入图片。

场景：在遇见一张图片是由多张图片叠加的情况下，我们可以将div里面嵌套div，然后div的宽高设置相同，通过子div的背景图片定位，可达到多张图片叠加成一张图片的效果。

7.CSS精灵图

什么是CSS精灵图？CSS精灵图是一种图像合成技术。

CSS精灵图的作用？可以减少服务器请求的次数，降低服务器的压力。

如何使用CSS精灵图？首先给标签设置宽度和高度，然后给这个标签的背景图片设置为精灵图，再通过背景图定位来找到所需的小图片即可。

8.css3对background新增了一个background-size和background-origin属性，background-size可以改变背景图片的大小，background-origin可以将图片放置在一个盒子的padding、border、content等不同区域。

9.图片和文字在一个li中垂直居中。

默认情况下，图片是和文字的基线进行对齐的，而为了能够使文字在图片的中间，给图片加上属性vertical-align:middle;详细见https://blog.csdn.net/guantina/article/details/80166065这个文章。