設置背景圖
<!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>
