JS控制网页背景随窗口大小自动适应

2024-09-05 12:21:55

字体：大中小

来源：转载

供稿：网友

一个实用的背景平铺技巧，这里使用了JavaScript技术，用来控制背景图片可以随网页窗口的大小而自动变大变小，以适应网页的大小，如果没有看到背景图片，请等待图片加载完成就看到了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>窗口背景变化</title><style type="text/css">		*{margin:0;padding:0;}#bg{position:absolute;top:0px;left:0px;z-index:-999;}</style></head><body><div id="bg"><img  src="/d/file/p/2024/09-05/2c84f9c9f86eced7ba9869f037022c1e.jpg" alt="HIGH"></div><input type="text" id="msg" name="msg" size="50"/><script type="text/javascript">	window.onresize = window.onload = function(){					var w,h					if(!!(window.attachEvent && !window.opera))					{						h = document.documentElement.clientHeight;						w = document.documentElement.clientWidth;					}else{						h =	window.innerHeight;						w = window.innerWidth;					}		document.getElementById('msg').value  ='窗口大小：' + 'width:' + w + '; height:'+h;				var bgImg = document.getElementById('bg').getElementsByTagName('img')[0];				bgImg.width = (w - 5);				bgImg.height= (h-5) ;															}			</script></body></html>

上一篇：CSS给网页上的评论文本框加上提醒功能背景图片

下一篇：CSS控制背景透明而内容不透明的方法