CSS背景相关

背景颜色（background-color）

表示：

十六进制、rgb()、rgba()

注意：

padding区域是有背景颜色的

背景图片（background-image）

图片路径要写到url()圆括号中，可以是相对路径，也可以是http://开头的绝对路径

背景图片的重复模式（background-repeat）

值	意义
repeat	x，y均平铺（默认）
repeat-x	x平铺
repeat-y	y平铺
no-repeat	不平铺

背景图片的尺寸（background-size）

/* 宽 高 */
background-size:100px 200px;

值也可以用百分数来设置，表示盒子的宽高的百分之多少；需要等比例设置的值，写auto；

值也可以用contain（将背景图片智能改变尺寸以容纳到盒子里）和cover（将背景图片智能改变尺寸以撑满盒子）表示

背景裁切（background-clip）

用来设置元素的背景裁切到哪个盒子

值	意义
border-box	背景延伸至边框（默认值）
padding-box	背景延伸至内边(padding)，不会绘制到边框处(仅在dotted、dashed边框时，可察觉)
content-box	背景被裁剪至内容区

背景固定（background-attachment）

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

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

背景图片位置（background-position）

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

值：

background-position: 100px 200px;
background-position: center center;
background-position: bottom center;
background-position: right top;

css精灵（雪碧图）

将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个

优点：减少HTTP请求数，加快网页显示速度。

缺点：不方便测量，后期改动麻烦。

线性渐变

可以用background-image属性里的linear-gradient()形式创建线性渐变背景

// 向右边渐变，从蓝到红
background-image: linear-gradient(to right,blue,red);
//左下角45°开始渐变，从蓝到红
background-image: linear-gradient(45deg,blue,red);

径向渐变

可以用background-image属性里的radial-gradient()形式创建径向渐变背景

// 以盒子中心为圆心，从红到蓝
background-image: radial-gradient(50% 50%, red ,blue);