背景
目录
1、背景颜色background-color
2、背景图片
3、背景重复性background-repeat
4、背景图位置background-position
5、背景图固定性background-attachment
6、背景尺寸background-size
7、背景修剪background-clip
8、背景源background-origin
9、背景background
10、背景渐变
background-color
1.background属性
定义： 用于定义元素的背景色
2.背景色覆盖到哪个区域停止？
边框，但不会超出边框
3.background-color可以定义渐变色吗？
不可以
4.背景颜色值的写法有几种？
- 十六进制 #ff0000
- 英文单词 red
- rgb()
- rgba(红，绿，蓝，alpha)
- rgba(0-255,0-255,0-255,0-1)
- hsl()
- hsla(色相，饱和度，明度，不透明度)
- hsla取值范围：(0-360,0-100%，0-100%，0-1)
背景图片
'./'表示根目录
'./'表示当前目录
'../'表示返回上一级目录
背景重复性
background-repeat: repeat; /默认重复/
background-repeat: repeat-x; /水平重复/
background-repeat: repeat-y; /垂直重复/
background-repeat: no-repeat; /不重复/
背景图位置
background-position: 水平偏移，垂直偏移;
background-position: 0 0; 像素单位
background-position: 0% 0%; /百分比单位/
background-position: left top; /关键词单位/
背景图固定性
background-attachment: fixed; /fixed ：无论是主视口还是元素视口，背景都不会动/
background-attachment: local; /*背景图跟随主视口和元素视口都会一起动*/
background-attachment: scroll; /*默认值：背景图跟随主视口一起动，不跟随元素视口一起动*/
背景尺寸
background-size: auto;/根据图片的原始宽高级比例计算背景图尺寸/
background-size: cover; /图片必须覆盖整个原始，图片的局部可能无法显示/
background-size: contain; /* 元素必须包含整个图片,元素的局部可能会出现空白 */
background-size: 240px 240px;
background-size: 240px auto; /值一杯解析为宽度，auto按比例自动调整宽度/
background-size: 100% 100%; /参照元素去计算/
背景修剪
background-clip: content-box;
background-clip: padding-box;
background-clip: border-box;
background-clip: text; /让图片显示在文本中/
背景源
background-origin: content-box;
background-origin: padding-box;
background-origin: border-box; /默认/
背景
background: 背景图片，重复性，位置，固定性，大小，;
背景渐变
- 线性渐变
- 径向渐变
- 角度渐变
渐变是什么？
定义：指两种颜色之间的平滑过度
线性渐变是什么？
定义：指两种颜色之间按照直线方法平滑过度。
径向渐变是什么？
定义：指两种颜色之间按照射线方式平滑过度。
角度渐变是么？
定义：指两种颜色之间按照360°旋转方式平滑过度。
设置渐变的属性时哪个？
定义：background-image
线性渐变语法：
background-image: linear-gradient(渐变角度，颜色停止列表);
径向渐变语法：
radial-gradient(渐变形状(circle,ellipse) 渐变位置，颜色列表)
radial-gradient(渐变形状，颜色列表)
角度渐变语法：
conic-gradient（from 角度，颜色列表）
conic-gradient(at 位置，颜色列表)
