background-color:指定对象的背景颜色。
aaaa red rgb() rgba() hsl() hsla()
background-image:指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
none: 无背景图。
url(): 使用绝对或相对地址指定背景图像。
linear-gradient: 使用线性渐变创建背景图像。(CSS3)
1.background-image:linear-gradient(yellow, green, red, blue);
2.background-image:linear-gradient(0, yellow, green);
3.background-image:linear-gradient(90deg, yellow, green);
4.background-image:linear-gradient(180deg, yellow, green);
5.background-image:linear-gradient(to left, yellow, green);
6.background-image:linear-gradient(to top left, yellow, green);
7.background-image:linear-gradient(135deg, yellow 20%, green 40%);
8.background-image:linear-gradient(to left,rgba(142, 142, 142, 0.5))
9.background-color:yellow;
background-image:linear-gradient(
135deg,
blue 25%,
transparent 25%,
transparent 50%,
blue 50%,
blue 75%,
transparent 75%,
transparent 100%
)
background-size:40px 40px;
background-repeat:no-repeat;
radial-gradient: 使用径向(放射性)渐变创建背景图像。(CSS3)
1.background-image:radial-gradient(yellow,green);
2.background-image:radial-gradient(120px at center center, yellow ,green);
3.background-image:radial-gradient(120px at 80px 80px,yellow,green);
4.background-image:radial-gradient(circle at center center, yellow, green)
5.background-image:radial-gradient(ellipse at center center, yellow, green);
repeating-linear-gradient: 使用重复的线性渐变创建背景图像。(CSS3)
background-image:repeating-linear-gradient(yellow 10%, green 16%);
repeating-radial-gradient: 使用重复的径向(放射性)渐变创建背景图像。(CSS3)
background-image:repeating-radial-gradient(yellow 10%, green 10%);
background-repeat:指定对象的背景图像如何铺排填充。
repeat
no-repeat
background-attachment:指定对象的背景图像是随对象内容滚动还是固定的。
fixed
scroll
local
background-position:指定对象的背景图像位置。
(填写两个值或一个)
百分比
px
center
left
right
bottom
top
background-origin:指定对象的背景图像显示的原点。
padding-box: 从padding区域(含padding)开始显示背景图像。
border-box: 从border区域(含border)开始显示背景图像。
content-box: 从content区域开始显示背景图像。
background-clip:指定对象的背景图像向外裁剪的区域。
padding-box: 从padding区域(不含padding)开始向外裁剪背景。
border-box: 从border区域(不含border)开始向外裁剪背景。
content-box: 从content区域开始向外裁剪背景。
text: 从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果
background-size:指定对象的背景图像的尺寸大小。
length: 用长度值指定背景图像大小。不允许负值。
percentage: 用百分比指定背景图像大小。不允许负值。
auto: 背景图像的真实大小。
cover: 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。