css把背景图片拉伸至100%

最新推荐文章于 2024-06-28 14:19:36 发布

zzc1684

最新推荐文章于 2024-06-28 14:19:36 发布

阅读量464

点赞数

CC 4.0 BY-SA版权

分类专栏： Html 文章标签： css把背景图片拉伸至100%

本文链接：https://blog.youkuaiyun.com/zzc1684/article/details/84796603

Html 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS实现网页背景图片的自适应屏幕分辨率调整。通过设置div的宽度、高度并结合background-size: cover属性及IE浏览器的滤镜效果，确保了不同屏幕尺寸下背景图片的良好显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
	<head>
		<title>test</title>
		
		<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>
	</head>
	
	<body>
		<!-- 背景图片自适屏幕分辨率 -->
		<div id="bodybg">
		  <img src="http://192.168.0.245/darling/static/images/bg2.jpg" class="stretch" />
		</div>
	</body>
</html>

<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> 

使用滤镜，其中 sizingMethod="scale" 就是拉伸。