设置背景图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景设置</title>
<style>
.header{
background-color: teal;
width: 200px;
height: 200px;
border: 1px solid black;
/*设置背景图片,默认只要位置够,无限重复*/
background-image: url("img/nav_icon_01.png");
/*让背景图不重复显示,只显示一次*/
background-repeat: no-repeat;
}
.warp1{
background-color: yellow;
width: 200px;
height: 200px;
border: 1px solid black;
/*设置背景图片,默认只要位置够,无限重复*/
background-image: url("img/nav_icon_01.png");
/*让背景图在x方向上铺满*/
background-repeat: repeat-x;
}
.warp2{
background-color: red;
width: 200px;
height: 200px;
border: 1px solid black;
/*设置背景图片,默认只要位置够,无限重复*/
background-image: url("img/nav_icon_01.png");
/*让背景图在y方向上铺满*/
background-repeat: repeat-y;
}
.warp3{
background-color: green;
width: 200px;
height: 200px;
border: 1px solid black;
/*设置背景图片,默认只要位置够,无限重复*/
background-image: url("img/nav_icon_01.png");
/*让背景图在x,y方向上铺满*/
background-repeat: repeat;
}
.warp4{
background-color: blue;
width: 200px;
height: 200px;
border: 1px solid black;
/*设置背景图片,默认只要位置够,无限重复*/
background-image: url("img/nav_icon_01.png");
/*让背景图在x,y方向上铺满,默认效果*/
/*background-repeat: repeat-y;*/
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="warp1"></div>
<div class="warp2"></div>
<div class="warp3"></div>
<div class="warp4"></div>
</body>
</html>
