背景属性组
1.背景颜色 background-color
- 颜色会覆盖到 border下面
- 不可以定义渐变色
- 背景色属性值的写法
- 1.十六进制#fff
- 2.英文单词
- 3.rgb（）
- 4.rgba（红色，绿色，蓝色，不透明度）
- 5.hsl（）
- 6.hsla（色相，饱和度，明度，不透明度）
2.背景图片 background-image
3.背景重复性 background-repeat
4.背景定位 background-position
语法：
background-position：水平偏移 垂直偏移 ;
5.背景固定性 background-attachment
- scroll 背景图跟随主视口和元素视口一起移动
- fixed 无论是主视口还是元素视口，背景都不动
- local 本地背景图跟随元素视口一起移动
6.背景尺寸 background-size
设置背景图尺寸
- auto 默认值 根据图片的原始宽高以及比例计算尺寸
- contain 元素必须包含整个图片 ，元素的局部可能会出现空白
- cover 图片必须覆盖整个容器 可能会隐藏掉部分图片
- 直接设置
- 第一个是宽，第二个是高
7.背景图片剪切background-clip
- border-box 默认值
- padding-box 将背景图只显示在内边距和内容区内部
- content-box 将背景图只显示在内容区内部
- text 将背景图只显示在文字的下方
8.背景源 background-origin
- padding-box 默认值，使背景图片开始位置是以内边距为参照物
- border-box 使背景图片开始位置是以边框为参照物
- content-box 使背景图片开始位置是以内容区为参照物
9.背景 background
10.背景渐变 background-images
渐变指两种颜色之间的平滑过渡
- linear-gradient 线性渐变
- 指两种颜色之间按照直线方式平滑过渡
background-image: linear-gradient(渐变角度,颜色列表);
- radial-gradient 径向渐变渐变
- 指两种颜色之间按照射线方式平滑过渡
- 只能是渐变形状 at 渐变位置
background-image: radial-gradient(渐变形状 || 渐变大小 at 渐变位置,颜色列表);
- 角度渐变
- 指两种颜色之间按照360度旋转方式平滑过渡
