css background 背景

css background-repeat 属性可以设置图片的 平铺方式。

什么是平铺方式呢？比如网页上有个元素的大小为500*500，但是背景图的大小只有200*100，那么这个500*500元素有些地方是没有背景图的，因为图片大小不够啊，所以这个时候可以使用css 背景图的平铺属性来填充整个背景图。默认情况下是横向和纵向都填充的。

语法

background-repeat：repeat | no-repeat | repeat-x | repeat-y

参数

其中参数如下，默认情况下是纵向和横向都平铺的。

参数作用
repeat背景图像在纵向和横向上平铺（默认的）
no-repeat背景图像不平铺
repeat-x背景图像在横向上平铺
repeat-y背景图像在纵向上平铺

例子

根据以上几种方式举例说明它的用法。

<!DOCTYPE html>
<html>
<title>css background-repeat属性例子</title>
<head>
<style>
div{
	background-color:gray;
	text-align:center;	
	float:left;
	margin-left:10px;
	margin-top:10px;
	color:#fff;
        width:300px;
        height:200px;
}
.div1 {
   background-image: url(/static/default/yxjc/css/good-morning.jpg) ;
}
.div2 {
   background-image: url(/static/default/yxjc/css/good-morning.jpg) ;
   background-repeat: no-repeat;
}
.div3 {
   background-image: url(/static/default/yxjc/css/good-morning.jpg) ;
   background-repeat: repeat-x;
}
.div4 {
   background-image: url(/static/default/yxjc/css/good-morning.jpg) ;
   background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="div1">
	默认平铺
</div>
<div class="div2">
	不平铺
</div>
<div class="div3">
	x平铺
</div>
<div class="div4">
	y平铺
</div>
</body>
</html>
输出：

css background-repeat 设置平铺方式