背景属性

背景属性

 

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;
}