1.背景颜色
background-color: [
指定颜色
]
background-color
:blue；
background-color
:
transparent //设置背景是透明的
2.背景图片
background-image
:
url
(
...
)
1. url
不要遗漏
.
2. url
可以是绝对路径
,
也可以是相对路径
3. url
上可以加引号
,
也可以不加
.
background-image
:
url
(../
rose.jpg
); //我放在上级目录下；也可以是网络图片
3.背景平铺
background-repeat
: [
平铺方式] //可以理解为如果背景图片很小；是铺一张还是多张
重要取值
:
repeat:
平铺
no-repeat:
不平铺
repeat-x:
水平平铺
repeat-y:
垂直平铺
背景颜色和背景图片可以同时存在
.
背景图片在背景颜色的上方
4.背景位置
background-position
:
x
y
;
1.
方位名词
: (top, left, right, bottom)
2.
精确单位
:
坐标或者百分比
(
以左上角为原点
)
3.
混合单位
:
同时包含方位名词和精确单位
5.背景尺寸
background-size
:
length
|
percentage
|
cover
|
contain
;
可以填具体的数值
:
如
40px 60px
表示宽度为
40px,
高度为
60px
也可以填百分比
:
按照父元素的尺寸设置
.
cover:
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
