CSS中背景颜色、背景图片、渐变色、背景定位、精灵图（雪碧图）介绍

背景background:

背景可以设置为颜色和图片，设置为图片时，可以对图片继续设置。

background-color:设置背景颜色：

其颜色的取值方式前面提到过，和color的取值一样，但是默认值transparent透明

	body {
      background-color: #332211;
    }

background-image:设置背景图片：

其值为：none默认值无背景、url(图片地址)，图片地址无需加引号。

	body {
      background-image: url(images/test.jpg);
    }

渐变色：

background的一个属性值，一种颜色向另一种颜色平滑地过渡的效果，分线性渐变和径向渐变、角向渐变;

线性渐变语法：

linear-gradient(颜色 起始百分比 , 颜色 结束百分比),线性渐变默认方向是从上到下，若要是改为水平方向的渐变则需要在括号最前面加to right等方位或角度（45deg）,如：

	div {
      background:linear-gradient(to right,red 0%,yellow 50%,#ff00aa 100%)
    }

径向渐变语法：

radial-gradient(颜色 起始百分比 , 颜色 结束百分比),径向渐变默认方向是从中心内到外，若要改变渐变圆心位置则需要在括号最前面加at top等方位或值（at 10px 20px）

	div {
      background-image:radial-gradient(at top,red 0%,yellow 50%,#ff00aa 100%)
    }

渐变重复：

渐变重复只需要在radial-gradient和linear-gradient前面加前缀repeating，如

	div {
      background-image:
        repeating-radial-gradient(at top,red 0%,yellow 50%,#ff00aa 100%)，
        repeating-linear-gradient（to right, blue 0%,yellow 100%);
    }

background-repeat:设置背景是否平铺：

其值：默认值repeat水平垂直平铺、no-repeat不平铺、repeat-x水平平铺、repeat-y垂直平铺

	body {
      background-repeat: no-repeat;
    }

★★background-image和background-color可以同时使用，此时图片设置为不平铺，图片占不到的空白部分显示background-color

background-size:设置背景大小：

其属性值为一对尺寸，前面的是width，后面的是height，此属性是背景缩放，并非背景裁剪,当给一个值或另一个值为auto时，图片等比例缩放，此属性值还可以给关键词：contain一边触碰到边框后大小确定、cover铺满整个元素、

	div {
      background-size: 300px 50%;
    }

background-origin背景图片显示基点:

其值：padding-box内边距开始显示背景，boder-box边框开始显示背景、content-box内容区开始显示背景图片

	div {
      background-origin: border-box;
    }

background-clip:背景裁剪：

其值：content-box裁掉内容区以外的背景、padding-box裁掉内边距以外的背景、border-box裁掉边框以外的背景

	div {
      background-clip: border-box;
    }

background-position:定位背景图片：

其值为一对或单个;像素值、百分比、方位词（left、right、bottom、top、center），一对值时中间用空格隔开，当值为具体的像素或者百分比时，第一处设置水平方向的位置，第二处设置垂直方向的位置，只有一个像素或百分比值时，设置的是水平方向的定位；当值为方位名词时，没有位置的限制，只有一个方位词时，根据方位词自动识别水平还是垂直方向。无论是具体数值还是方位名词，设置一处时，另一方向默认居中。默认图片居于左上角。

	div {
      width: 400px;
      height: 400px;
      background-color: aqua;
      background-image: url(捕获.PNG);
      background-repeat: no-repeat;
      background-position: center top;
    }

background-attachement:设置背景图像是否跟随内容滚动（背景附着）：

其值：默认scroll背景相对元素固定，背景随页面滚动而滚动、fixed背景相对视口固定、local相对元素内容固定，随元素内容滚动

	div {
      background-attachement: fixed;
    }

背景连写：

背景连写的顺序官方没有强制要求，建议这样写：background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

	div {
      background:#000 url(images/bg.jpg) no-repeat fixed center top;
    }

多重背景：

多重背景是指给一个盒子可以设置多个背景图片，只需要多设置几个背景属性值，中间用逗号隔开即可，颜色需要写在最后，如：

	div {
      background: url(images/bg.jpg) no-repeat fixed center top,
        url(images/bg1.jpg) no-repeat fixed center top,
        url(images/bg2.jpg) no-repeat fixed center top,
        yellow;
    }

精灵图（雪碧图）：

在实际开发中，有的时候一个页面会用到好多的图，此时会加重浏览器的负担，为了解决浏览器请求次数负担，可以把这些图放到一张图上面，一次请求到本缓存，利用定位的方式控制每个小图在所在区域显示即可。

	div {
      width: 50px;
      height: 50px;
      background:url(images/bg.png) no-repeat -20px -50px;
    }

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海