小技巧之——背景图片自动拉伸

最新推荐文章于 2023-08-29 15:49:12 发布

最新推荐文章于 2023-08-29 15:49:12 发布 · 391 阅读

文章标签：

#php #数据库 #javascript #ViewUI

本文介绍了如何通过JavaScript实现网页加载时自动加载背景图片，并根据不同浏览器环境进行适配，确保用户体验不受影响。

<html>
	<head>
		<link href="bgd.css" rel="stylesheet" type="text/css"/>
		<script type="text/javascript">
			var isIE=!!window.ActiveXObject; 
			if (!isIE){ 
				var body = document.lastChild;

				var bgdDiv = document.createElement("div");
				bgdDiv.setAttribute("id","bgd");

				var img = document.createElement("img");
				img.setAttribute("src","http://pic12.nipic.com/20110215/6453930_173236673194_2.jpg");

				bgdDiv.appendChild(img);
				
				body.appendChild(bgdDiv);
			} 
		</script>
	</head>

	<body class="bgd_ie">
		<input type="text" ></input>
	</body>
</html>

bgd.css

.bgd_ie{
    FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='http://pic12.nipic.com/20110215/6453930_173236673194_2.jpg' ,sizingMethod='scale')
}

div#bgd{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:-1;
} 
div#bgd > img {
    height:100%;
    width:100%;
    border:0;
}