网页背景图片自适应浏览器大小

最新推荐文章于 2023-11-07 10:42:26 发布

转载最新推荐文章于 2023-11-07 10:42:26 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/siri/p/3410837.html

文章标签：

#xhtml #javascript #ViewUI

本文介绍了一种通过JavaScript实现背景图片自适应浏览器窗口大小的方法。利用window.onresize和window.onload事件监听器来获取浏览器窗口的宽度和高度，并相应地调整背景图片的尺寸。

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

背景图片自适应浏览器大小

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>背景图片自适应浏览器大小</title>
<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(‘container’).value  =’窗口大小：’ + ‘width:’ + w + ‘; height:’+h;
var bgImg = document.getElementById(‘bg’).getElementsByTagName(‘img’)[0];
bgImg.width = (w);
bgImg.height= (h) ;

}
</script>
<style type=”text/css”>
*html#container{background:url(../images/bg2.gif) no-repeat; width:100%;  min-height:1000px; height:auto !important; height:1000px;}
#bg{position:fixed;top:0px;left:0px;z-index:-999;}
.login{margin:0 auto; width:100%; height:420px; position:absolute; top:15%;}
.logo{margin:0 auto; width:450px; height:36px; background:url(../images/logo.png) no-repeat;}
.login_ct{background:#666; height:323px; margin-top:50px;}
.login_form{width:681px; height:323px; background:#CCC; margin:0 auto;}
</style>
</head>

<body>
<div id=”container”>

<div id=”bg”><img src=”images/bg2.gif” width=”1920″ height=”1080″ />
</div>
<div>
<div>
<div>

</div>
</div>
</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/siri/p/3410837.html