JS控制網(wǎng)頁(yè)背景隨窗口大小自動(dòng)適應(yīng)

2024-09-05 12:21:55

字體：大中小

供稿：網(wǎng)友

一個(gè)實(shí)用的背景平鋪技巧，這里使用了JavaScript技術(shù)，用來(lái)控制背景圖片可以隨網(wǎng)頁(yè)窗口的大小而自動(dòng)變大變小，以適應(yīng)網(wǎng)頁(yè)的大小，如果沒(méi)有看到背景圖片，請(qǐng)等待圖片加載完成就看到了。

<!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   class="iwvjtn8m0"   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給網(wǎng)頁(yè)上的評(píng)論文本框加上提醒功能背景圖片

下一篇：CSS控制背景透明而內(nèi)容不透明的方法