背景

目录

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 位置，颜色列表)