一.背景控制的常用属性

属性	说明	写法示例
background-color	添加背景颜色	`background-color:red;`
background-clip	背景裁切	`background-clip: content-box;`
background: linear-gradient();	背景渐变	`background: linear-gradient(45deg, red, yellow);`
background-image	添加背景图片 url(“图片路径”)	`background-image: url("girl.jpg");`
background-repeat	设置是否及如何重复背景图像	`background-repeat: no-repeat`;
background-attachment	置背景图像是否固定或者随着页面的其余部分滚动	`background-attachment: fixed;`
background-position	背景定位	`background-position: center right;`
background-size	规定背景图像的尺寸	`background-size: contain;`

注：以上有些属性有多个可设置的属性值，请查阅css手册具体查看每个属性对应的属性值都是什么用法，有什么作用。

下面列举一段示例代码，有一些属性的具体用法供参考，详细看注释：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>背景</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        /* border: 1px solid #000; */
        border-radius: 15px;
        /* 1.背景色 */
        background-color: lightgreen;
        /* 因为内边距是透明的，只能设置宽度不能设置样式，因此，背景色默认可以从内边距透出来 */
        /* padding: 20px; */
        /* 2.控制背景的覆盖范围限制在内容区，裁切 */
        background-clip: border-box;
        /* background-clip: content-box; */
        /* 3.渐变 deg为渐变角度 颜色顺序就是渐变顺序*/
        /* background: linear-gradient(red, yellow);
        background: linear-gradient(45deg, red, yellow);
        background: linear-gradient(to right, red, yellow);
        background: linear-gradient(
          to left,
          rgba(255, 0, 0, 0.5),
          white,
          yellow,
          white,
          yellow
        ); */
        /* 4.背景裁切 */
        /* background-clip: content-box; */
        /* 5.背景图片 url("图片路径")*/
        /* background-image: url("girl.jpg"); */
        /* background-repeat: no-repeat; */
        /* background-repeat: repeat-y; */
        /* background-attachment: fixed; */
        /* 6.背景定位: 位置 */
        /* background-position: 50px 60px; */
        /* background-position: right center; */
        /* background-position: center right; */
        /* 只写一个，第二个默认就是center */
        /* background-position: left; */
        /* background-position: 50% 20%; */
        /* 只写一个，第二个默认就是50% */
        /* background-position: 50% 50%; */
        /* 7.规定背景图像的尺寸 */
        background-size: contain;
        background-size: cover;
        /* 简写 */
        background: violet;
        background: url("mao.jpg") no-repeat center;
        position: relative;
        top: 20px;
        left: 30px;
        /* box-shadow: 5px 8px 10px #888; */
      }
      .box:hover {
        /* 外发光 */
        box-shadow: 0 0 8px #888;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

添加背景图片加一些盒子样式效果图：

二.精灵图的原理与用法

1.原理：精灵图就是把网页中一些背景图片整合到一张图片文件中，利用对背景图片的一些操作属性组合进行背景定位。

优点就是减少网页对服务器发起的http请求，快了网页访问速度，提升用户体验。

2.用法：
（1）首先我们得到一张我们需要用的精灵图例

（2）我们想要确定每个小图标在这个精灵图文件中的大小，我们就得量小图标的尺寸，这里我们推荐一款谷歌浏览器标尺插件 Page Ruler Redux 下载后把crx文件拖拽到管理拓展程序下即可安装这样我们可以量到每个小图标的宽高

（3）然后我们利用css的背景属性来控制位置取到精灵图上的任意图标
代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>背景实战: 精灵图/雪碧图</title>
    <style>
      .box1 {
        width: 500px;
        height: 400px;
        border: 1px solid #000;
        /* 添加背景图片 */
        background-image: url("1.png");
        /* 设置背景图片不重复 */
        background-repeat: no-repeat;
        /* 设置背景定位 */
        background-position: 50px 20px;
      }
      .box2 {
        /* 小图标 */
        width: 110px;
        height: 110px;
        /* 添加背景精灵图 */
        background-image: url("1.png");
        /* 不重复 */
        background-repeat: no-repeat;
        /* 利用定位属性定位到精灵图上的任意小图标 */
        background-position: -220px -110px;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>