将图片设置为背景图有两种方式,一种是用<img>
标签,一种是用css的background-image:url(“”);样式
1.利用<img>
标签设置背景图全显示,且自适应屏幕
代码:HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="img.css" rel="stylesheet">
</head>
<body style="margin: 0">
<div class="bac" >
<p class="col">500</p>
<div class="mid" >
<img src="1.png" class="im">
<label class="fo">返回首页</label>
</div>
</div>
<div id="div1">
<img src="2.png">
</div>
</body>
</html>
css:
.mid {
width: 100px;
height: 20px;
background-color: blue;
margin-left: auto;
margin-right: auto;
}
.im{
width:10px;
height:10px;
}
.col {
font-size: 80px;
color: gold;
text-align: center;
margin-top: 70px;
}
.fo{
color: #FFFFFF;
overflow:hidden;
}
.bac
{
margin:0;
padding:0;
width:100%;
height:100%;
}
<!--将图片外部的div的位置设置为fixed,使得图片不占有原来的位置;将上下左右设置为0,将图片铺满屏幕(前提是img的宽和高都是100%);将z-index设置为-1,就是将图片设置在最底层;-->
div#div1{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index:-1;
}
div#div1 > img {
height:100%;
width:100%;
border:0;
}
结果:
* 也可参见:http://www.jb51.net/css/24734.html*
2.利用background-image:url(“”)样式
代码:
主要是利用background-size:cover;来实现图片铺满屏幕,但是有个问题是缩小屏幕,高度不会自适应,而且图片是等比例铺满屏幕,所以有可能显示不了图片的全景。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IMG</title>
<style>
.bac{
text-align: center;
}
.col{
font-size: 100px;
color: yellow;
}
.mid{
width: 100px;
background-color: blue;
/*居中*/
margin: auto auto;
}
.im{
width: 10px;
height: 10px;
}
.fo{
color: white;
text-align: center;
}
</style>
</head>
<!--background-size: cover;样式的作用是图片铺满背景,-->
<body style="background:url('2.png') no-repeat;background-size: cover;">
<div class="bac" >
<p class="col">500</p>
<div class="mid" >
<img src="1.png" class="im">
<label class="fo">返回首页</label>
</div>
</div>
</body>
</html>