CSS的背景属性可以定义元素背景颜色、背景图片等。
02.1背景颜色属性
CSS使用background-color
定义背景颜色。
实例语法:
body {
background-color: red;
}
背景属性值可以是颜色词、十六进制的颜色、RGB、RGBA。
02.2背景图片属性
CSS使用background-image
定义背景图片。
body {
background-image: url("./image1.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
}
背景图片属性值为url()
.
背景图片background-repeat
属性值表示是否平铺(铺满容器)。
背景大小属性background-size
属性值可以是像素、百分比、cover……
背景图片的位置属性background-position
值(默认值是背景图的0 0)可以是像素、百分比、(left top right bottom)位置组合。
background-repeat
的值
值 | 描述 |
---|---|
no-repeat | 默认值,不重复铺满 |
repeat | 重复铺满 |
background-size 的值 |
值 | 描述 |
---|---|
120px 120px | 款120像素 高120像素 |
100% 50% | 宽度100% 高度50% |
cover | 根据图像覆盖 |
background-position 的值 |
值 | 描述 |
---|---|
20px 20px | 取图片的20px 20px坐标为起始点取background-size大小 |
50% 50% | 取图片50% 50%坐标位置为起始点,取background-size大小,默认为0% 0%位置 |
left top | 左 上 |
left center | 左 中 |
left bottom | 左下 |
right top | 右 上 |
right center | 右 中 |
right bottom | 右 下 |
center center | 中 中 |
center top | 中 上 |
center bottom | 中 下 |