背景属性
CSS背景属性主要有以下几个
属性 | 描述 |
---|---|
background-color | 设置背景颜色 |
background-image | 设置背景图片 |
background-position | 设置背景图片显示位置 |
background-repeat | 设置背景图片如何填充 |
background-size | 设置背景图片大小属性 |
background-color属性
该属性设置背景颜色
<div class="box"></div>
.box{
width:300px;
height:300px;
}
background-image属性
设置元素的背景图像
元素的背景是元素的总大小,包括填充和边界(不包括外边距).默认情况下background-image属性放置在元素的左上角,如果图像不够大的话会在垂直和水平方向平铺图像,如果图像大小超过元素大小从图像的左上角显示元素大小的那部分
<div class="box"></div>
.box{
width:600px;
height:600px;
background-image:url("images/img1.jpg");
}
background-repeat属性
该属性设置如何平铺背景图像
值 | 说明 |
---|---|
repeat | 默认值 |
repeat-x | 只向水平方向平铺 |
repeat-y | 只向垂直方向平铺 |
no-repeat | 不平铺 |
.box{
width:600px;
height:600px;
background-color:#fcc;
background-image:url("images/img1.jpg");
background-repeat:no-repeat;
}
background-size属性
该属性设置背景图像的大小
值 | 说明 |
---|---|
length | 设置背景图片的宽度和高度,第一个值宽度,第二个值高度,如果只是设置一个,第二个值auto. |
percentage | 计算相对位置区域的百分比,第一个值宽度,第二个值高度,如果只是设置一个,第二个值auto. |
cover | 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 |
contain | 保持图片纵横比并将图像缩放成适合背景定位区域的最大大小 |
.box{
width:600px;
height:600px;
background-color:#fcc;
background-image:url("images/img1.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
}
background-position属性
该属性设置背景图片的起始位置,其默认值是:0% 0%
值 | 说明 |
---|---|
left top | 左上角 |
left center | 左中 |
left bottom | 左下 |
right top | 右上角 |
right center | 右中 |
right bottom | 右下 |
center top | 中上 |
center center | 中中 |
center bottom | 中下 |
x% y% | 第一个值是水平位置,第二个值是垂直位置,左上角是0% 0%,右下角是100% 100%.如果指定了一个值,其他默认是50%.默认是0% 0% |
xpos ypos | 单位是像素 |
.box{
width:600px;
height:600px;
background-image:url("images/img1.jpg");
background-repeat:no-repeat;
background-position:center;
}