背景、渐变色及雪碧图

背景：

设置一个背景颜色：

background-color: #bfa;

设置一个背景图片

background-image: url(img/3.png);

设置背景不重复

background-repeat: no-repeat;

设置背景图片的位置

background-position: center center;

设置图片大小

background-size:cover ;

设置图片偏移的原点

background-origin: padding-box;

设置背景的范围

background-clip: padding-box;

background复合写法

通过该属性可以同时设置所有背景相关的样式

没有顺序的要求，谁在前谁在后都行

也没有数量的要求，不写的样式就使用默认值

background-size要写在background-position后面

渐变色：

渐变：

通过渐变可以设置一些复杂的背景颜色，可以从实现一个颜色向其他颜色过渡的效果

渐变是图片，通过 background-image设置

可选值

1：linear-gradient(方位,颜色1,颜色2)

['ɡreidiənt]线性渐变，颜色沿着一条直线发生变化

参数1:表示方位，（可选值，不写默认是to bottom）

(1)to left，to right, to bottom, to top

(2)xxxdeg 表示角度，度数，会更灵活

(3)turn 表示圈 .5turn参数2:颜色1参数3:颜色2

注意：可以写多个颜色，默认情况下，颜色是均分占比的也可以手动的指定渐变的分布情况

background-image:linear-gradient(red 50px,yellow) ;

颜色后直接跟占比

2:repeating-linear-gradient()

可以平铺的线性渐变

background-image: repeating-linear-gradient(yellow 0px, red 50px);

参数跟linear-gradient是一样的

3:radial-gradient()

['reidiəl] ['ɡreidiənt]经向渐变（放射性的效果）

默认情况下，圆心是根据元素的形状来计算的

正方形 圆形

长方形 椭圆型

参数1:圆心的形状

（1）circle圆形，ellipse椭圆，

（2）设置的大小 at 位置==>像素1 像素2 at 0px 0px

background-image: radial-gradient(100px 100px at 100px 0px,red,yellow);

参数2:颜色1

参数3:颜色

雪碧图

图片整合技术（CSS-Sprite）

优点：

1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，

提高访问效率，提高了用户体验。

2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验

雪碧图使用步骤

1:先确定要使用的图标

2:测量图标的大小

3:根据测量结果创建一个元素

4:将雪碧图设置为元素的背景

5：设置一个偏移量以显示正确的图片