背景的属性:
#div1{
background-color:red;
}
#div1{
background-image:url(img/bg_1.png);
}
- background-size:设置背景图片的尺寸
- cover(覆盖):图片等比例缩放,直到最小部分填满容器有可能会出现图片显示不全的效果
- contain(包含):图片等比例缩放,直到最大部分填满容器有可能会出现图片覆盖不完整的效果
- length:设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”
#div1{
background:url(img/bg_1.png) no-repeat;
background-size:100% 100%;
}
- background-repeat:规定背景图片按什么方式重复排列
- repeat 默认。背景图像将在垂直方向和水平方向重复。
- repeat-x 背景图像将在水平方向重复。
- repeat-y 背景图像将在垂直方向重复。
- no-repeat 背景图像将仅显示一次。
- background-position:设置背景图像的起始位置(偏移量)
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
- 当只指定x或y中的一个方向时,另一个方向默认是居中效果
- 也可以是x% y% 或两个长度数值形式
- background-origin:图片开始位置(相对于什么位置来定位)
- border-box:从外边框处开始
- padding-box:从内边距处开始
- content-box:从内容处开始
- background-clip:背景图片的剪切开始位置
- border-box:从外边框处开始
- padding-box:从内边距处开始
- content-box:从内容处开始