背景、渐变

背景颜色background-color

属性值表示法：十六进制、rgb()、rgba()
padding有背景颜色

背景图片background-image

background-image: ur1(images/bg1.jpg);

路径：相对路径、http:/开头的绝对路径
若外链样式表，则用相对CSS文件的图片路径

重复模式background-repeat

属性	意义
repeat;	x,y均平铺（默认）
repeat-x;	x平铺
repeat-y;	y平铺
no-repeat;	不平铺

尺寸background-size

属性值单位：px、百分数

background-size：100px 200px；

特殊的属性值：
contain：智能改变尺寸以容纳到盒子里
cover：智能改变尺寸以撑满盒子
auto：等比例设置

裁切background-clip

设置元素的背景裁切到哪个盒子。兼容到IE9。

值	意义
border-box	背景延伸至边框（默认值）
padding-box	背景延伸至内边（padding）
content-box	背景被裁剪至内容区

起源background-origin

规定 background-position 属性相对于什么位置来定位

值	意义
border-box	背景图像相对于边框盒来定位
padding-box	背景图像相对于内边距框来定位
content-box	背景图像相对于内容框来定位

固定background-attachment

决定背景图像的位置是在视口内固定/随着包含它的区块滚动

值	意义
fixed	自己滚动条不动，外部滚动条不动
local	自己滚动条动，外部滚动条动
scroll	自己滚动条不动，外部滚动条动（默认值）

位置background-position

设置背景图片出现在盒子的什么位置

background-position：100px 200px；

用top、bottom、center、left、right描述图片出现的位置
例：水平竖直均居中

`background-position: center center;`

CSS精灵图/雪碧图

多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个，
优点：减少HTTP请求数，加快网页显示速度
缺点：不方便测量、改动麻烦

background综合

在一个声明中设置所有的背景属性

背景渐变

线性渐变linear-gradient（）

background-image: linear-gradient(to right, blue, red);
/* 渐变方向、开始颜色、结束颜色 */

可有多个颜色值，且可用百分数定义位置

linear-gradient(to bottom, blue, yellow 20%, red);

径向渐变radial-gradient（）

background-image: radial-gradient(50% 50%, blue, red);
/* 圆心坐标、开始颜色、结束颜色 */

附加：浏览器私有前缀

不同浏览器有不同私有前缀，用来对试验性质的CSS属性加以标识

品牌	前缀
Chrome	-webkit-
Firefox	-moz-
IE、Edge	-ms-
欧朋	-o-