<p class="sougouContent"> </p> <p class="tag"> css </p> 大侠们，请教一个问题： <br> 假设用户显示器的宽度是1000px，然后用background-image设置一张宽度为800px的背景图片，然后把图片的排列方式设置为no-repeat。问题就出来了。还有200px的网页空间是空白的，怎么把这张宽度为800px的图片设置为用户显示屏宽度的100%，也就是拉伸这张背景图片。 <br> <h2>回复讨论(解决方案)</h2> <p class="sougouAnswer"> <style> <br /> <br /> #bodybg { <br /> position: absolute; <br /> width: 100%; <br /> height: 100%; <br /> left: 0px; <br /> top: 0px; <br /> z-index: 0; <br /> } <br /> #bodybg .stretch { <br /> width:100%; <br /> height:100%; <br /> } <br /> </style> <br> <br> </p> <br> <br> <!-- 背景图片自适屏幕分辨率 --> <br> <div> <br> <img alt="css怎么把背景图片拉伸至100%_html/css_WEB-ITnose" > <br> </div> <br> <br> <p class="sougouAnswer"> <style> <br /> div{ <br /> width:100%; <br /> height: 500px; <br /> background-image:url('2.png'); <br /> background-size:cover; <br /> filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMethod='scale' , src='2.png') <br /> } <br /> </style> <br> </p> <br> <div></div> <br> <p class="sougouAnswer"> <style> <br /> div{ <br /> width:100%; <br /> height: 500px; <br /> background-image:url('2.png'); <br /> background-size:cover; <br /> filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMet…… <br /> +1 <br /> 使用滤镜，其中 sizingMethod="scale" 就是拉伸。 </style></p> <p class="sougouAnswer"> <style> <br /> div{ <br /> width:100%; <br /> height: 500px; <br /> background-image:url('2.png'); <br /> background-size:cover; <br /> filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( sizingMet…… <br /> <br /> 引用 3 楼 bbjbepzz 的回复:<style type="text/css"> <br /> div{ <br /> width:100%; <br /> height: 500px; <br /> background-image:url('2.png'); <br /> background-size:cover; <br /> filter : progid:DXImageTransform.Microsoft.AlphaIma…… <br /> <br /> 感谢这两位大侠，一个给出代码，一个解释。真的很感谢，学到了很多东西。！ </style></p>
