day06-背景

background-color

---

背景颜色

background-image

---

背景图片
如果背景图片和元素一样大，则背景图片正常显示；

如果背景图片小于元素，则图片会在元素中平铺；
如果背景图片小于元素，则有部分背景图片无法显示；

background-repead

---

背景的重复方式

可选值
repeat	默认值，背景会沿x、y双方向重复
repeat-x	背景仅沿x方向重复
repeat-y	背景仅沿y方向重复
no-repeat	背景图片不重复

background-position

---

背景图片位置
设置方式：
通过top、left、right、bottom、center；
使用方位必须同时指定两个值，如果只写一个则第二个默认就是center；
通过偏移量来指定背景图片的位置
水平方向的偏移量，垂直方向的偏移量；

background-clip

---

背景范围

可选值
border-box	默认值，背景会出现在边框的下边和内边距
padding-box	背景不会出现在边距，只会出现在内容区
center-box	背景只出现在内容区

background-origin

---

背景偏移量的计算原点

可选值
padding-box	默认值，background-position从内边距开始出现
center-box	背景图片的偏移量从内容去处计算
border-box	背景图片的偏移量从边框处计算

background-size

---

背景图片的大小
第一个值表示宽度，第二个值表示高度；如果只写一个值则第二个值默认是auto；

可选值
cover	图片的比例不变，将元素铺满
contain	图片的比例不变，将图片在元素中完整的展示

background-attachment

背景图片是否跟随元素移动

可选值
fixed	背景会固定在页面中，不会跟随元素移动
scoroll	默认值，背景图片会跟随元素移动

background

---

背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置，没有顺序要求，也没有属性是必须写的；
注意：
1、background-size必须写在background-position的后边并且使用 / ；
2、background-origin background-clip 这两个样式，orgin要在clip的前边；

解决背景闪烁问题

---

可以将多个小图片保存到一个大图片中，然后通过调整background-position来响应相应的图片，这样图片会自动加载到网页中，就可以避免出现图片闪烁问题；
这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图；

雪碧图使用步骤：

1. 先确定要使用的图标；
   

2. 测量要使用的图标的大小；

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

4. 将雪碧图设置为元素的背景图片；

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

雪碧图特点：
一次性将多个图片加载进页面，降低请求的次数加快访问速度，提高用户体验；

背景渐变

---

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

线性渐变（linear-gadient）

---

颜色沿一条直线发生变化；

linear-gadient，线性渐变开头可以指定一个渐变的方向；
渐变可以同时指定多个颜色，多个颜色默认情况下平均分布；也可以手动指定渐变的分布情况；

可选值
to left
to right
to top
to bottom
XXXdeg	deg表示度
XXXturn	turn表示圈

repeat-linear-gradient()可以平铺线性渐变；

径向渐变

---

radial-grodient()渐变放射性效果；
默认情况下，径向渐变的形状根据元素的形状来设计的；也可以手动指定径向渐变的大小；

大小可选值			位置可选值
circle	正圆		to right
ellipse	椭圆		to left
closest-side	近边		to center
closest-corner	近角		tobottom
farthest-side	远边
farthest-corner	远角

语法：
大小和位置都可以省略；

radial-gradient(大小 at 位置, 颜色 位置, 颜色 位置, 颜色 位置)