background-repeat属性怎样用【html5教程】

CSS的background-repeat属性是用来设置背景图象怎样平铺的。background-repeat:repeat-x示意只要程度位置会反复背景图象；background-repeat:repeat-y示意只要垂直位置会反复背景图象。

CSS background-repeat属性

作用：设置是不是及怎样反复背景图象。

基础语法：

background-repeat:repeat|repeat-x|repeat-y|no-repeat;

repeat：默认值，背景图象将向垂直和程度方向反复。

repeat-x：只要程度位置会反复背景图象。

repeat-y：只要垂直位置会反复背景图象。

no-repeat：设置背景图片不会反复。

申明：background-repeat 属性定义了图象的平铺形式。从原图象最先反复，原图象由 background-image 定义，并依据 background-position 的值安排。

CSS background-repeat属性的运用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
.demo1{
	width: 400px;
	height: 150px;
	border: 1px solid red;
	background-image:url('https://img.ki4.cn/upload/article/000/000/024/5c6a4428ea867709.png');
    background-repeat:repeat;
}
.demo2{
	width: 400px;
	height: 100px;
	border: 1px solid red;
	background-image:url('https://img.ki4.cn/upload/article/000/000/024/5c6a4428ea867709.png');
    background-repeat:no-repeat;
}
.demo3{
	width: 400px;
	height: 150px;
	border: 1px solid red;
	background-image:url('https://img.ki4.cn/upload/article/000/000/024/5c6a4428ea867709.png');
    background-repeat:repeat-x;
}
.demo4{
	width: 400px;
	height: 400px;
	border: 1px solid red;
	background-image:url('https://img.ki4.cn/upload/article/000/000/024/5c6a4428ea867709.png');
    background-repeat:repeat-y;
}
</style>
</head>

<body>
<h3>repeat设置背景图片向垂直和程度方向反复</h3>
<div class="demo1"></div>
<h3>no-repeat设置背景图片不反复</h3>
<div class="demo2"></div>
<h3>repeat-x设置背景图片向程度方向反复</h3>
<div class="demo3"></div>
<h3>repeat-y设置背景图片向垂直方向反复</h3>
<div class="demo4"></div>
</body>
</html>

效果图：