61,115
社区成员
发帖
与我相关
我的任务
分享css怎么把背景图片拉伸至100%
大侠们，请教一个问题：
假设用户显示器的宽度是1000px，然后用background-image设置一张宽度为800px的背景图片，然后把图片的排列方式设置为no-repeat。问题就出来了。还有200px的网页空间是空白的，怎么把这张宽度为800px的图片设置为用户显示屏宽度的100%，也就是拉伸这张背景图片。
假设用户显示器的宽度是1000px，然后用background-image设置一张宽度为800px的背景图片，然后把图片的排列方式设置为no-repeat。问题就出来了。还有200px的网页空间是空白的，怎么把这张宽度为800px的图片设置为用户显示屏宽度的100%，也就是拉伸这张背景图片。
...全文
请发表友善的回复…
发表回复
tigerpangpang 2014-07-22
- 打赏
- 举报
belearner 2013-02-20
- 打赏
- 举报
感谢这两位大侠，一个给出代码，一个解释。真的很感谢，学到了很多东西。！
athrunzero 2013-02-20
- 打赏
- 举报
+1
使用滤镜，其中 sizingMethod="scale" 就是拉伸。
bbjbepzz 2013-02-20
- 打赏
- 举报
<style type="text/css">
div{
width:100%;
height: 500px;
background-image:url('2.png');
background-size:cover;
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMethod='scale' , src='2.png')
}
</style>
<body>
<div></div>
</body>
如是我闻2012 2013-02-20
- 打赏
- 举报
<style type="text/css">
#bodybg {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 0;
}
#bodybg .stretch {
width:100%;
height:100%;
}
</style>
<body>
<!-- 背景图片自适屏幕分辨率 -->
<div id="bodybg">
<img src=XXXXXX.jpg class="stretch" />
</div>
</body>
