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@联系笔者 删除。

笔者：苦海