如何实现图片全屏（当图片大小不够大时）

方法一：


背景图片全屏要点：
1.设置包裹div 高和宽为：100%
{width:100%; height:100%;}
2.设置包裹div 的 position为relative
(position:relative;)
3.设置背景图片高和宽为：100%
{width:100%; height:100%;}
4.设置背景图片position 为absolute
{position: absolute;}
5.设置背景图片z-index 为-1
{z-index:-1;}

 

方法二：


1.设置包裹div 的高和宽为：100%
{width:100%; height:100%;}
2.添加包裹div 的背景图片，并且从左上角开始，在x方向重复
{background:url(../img/bg_2.jpg) left top repeat-x;}
3.设置背景大小 background-size 为100%
{background-size:100% 100%;}

html代码：

<body>　

　<!--方法一-->

　　<div id="divWrapper">
　　<img class="bgImg" src="img/bg.jpg"/>
　　<div class="content"></div>
　　</div>

</body>

 

<!--方法二-->
<div id="divWrapper_2">
<div class="content"></div>
</div>

css代码：

/* 方法一*/

.bgImg{ width:100%; height:100%; position:absolute; z-index:-1;}
.content{ width:600px; height:700px; margin:0 auto; margin-bottom:20px; background-color:red;}

 

/* 方法二*/
#divWrapper_2{ width:100%; height:100%; background:url(../img/bg_2.jpg) left top repeat-x; background-size:100% 100%;}

.content{ width:600px; height:700px; margin:0 auto; margin-bottom:20px; background-color:red;}

 

 posted on 2015-03-09 11:34  心情好tr美丽  阅读(1630)  评论(1)    收藏  举报