码迷,mamicode.com
首页 > 其他好文 > 详细

如何实现图片全屏(当图片大小不够大时)

时间:2015-03-09 12:48:35      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

方法一:


背景图片全屏要点:
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;}

 

如何实现图片全屏(当图片大小不够大时)

标签:

原文地址:http://www.cnblogs.com/tbq520/p/tbq520_background-image.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!