一、css设置
1. 设置背景图片
background-image: url(…/img/zyx_4.JPG);
路径名称中最好不要带括号。 设置背景图片要结合容器的高度
2. 背景不重复显示
background-repeat: no-repeat;
3. 背景图片位置居下
background-position: bottom;
4. 背景显示的横向、纵向设置
background-size:100% 100%;
5. 行高设置
line-height: 57px;
二、版权声明
©WangYX —— 效果：©WangYX
三、工程代码
1. index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Background 1021</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<div class="wrapper">
<div class="logo">
Lay-Z
</div>
<div class="nav">
<a href="#">VB</a>
<a href="#">JS</a>
<a href="#">CSS</a>
</div>
<div class="footer">
©WangYX
</div>
</div>
</body>
</html>
2. main.css
body{
margin: 0;
}
.wrapper{
background-image: url(../img/star1.JPG);
color: aliceblue;
height: 1000px;
background-repeat: no-repeat;
background-size:100% 100%;
}
.nav{
background-image: url(../img/1.PNG);
height: 57px;
line-height: 57px;
}
.nav a{
color: purple;
font-weight: bolder;
text-decoration: none;
}
.logo{
font-size: 30px;
padding: 10px;
}
.footer{
color: #fff;
position: absolute;
text-align: center;
height: 50px;
bottom: 0px;
width: 100%;
line-height: 60px;
background-image: url(../img/star2.jpg);
background-position: bottom;
}
3. 运行结果
