.bg{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/LoginBack.gif', sizingMethod='scale')}
除此之外,谁还有好的办法让背景图片大小随窗口的改变 自动改变呢? (郁闷中...)
22 个解决方案
#1
#2
学习,帮顶
#3
不懂,帮顶一个
#4
document.onresize = function() {
document.getElementById(imgId).width = document.body.clientWidth;
document.getElementById(imgId).height = document.body.clientHeight;
}
没测试
#5
把图片放到<img src=""></img>里
把img再放到需要放置背景图片的div标签里
控制img标签的height和width使其和div标签的高度宽度一致
图片的大小会随img的height,width值的调整而自动缩放
把img再放到需要放置背景图片的div标签里
控制img标签的height和width使其和div标签的高度宽度一致
图片的大小会随img的height,width值的调整而自动缩放
#6
<div class="logo">
<div class="logo_bg_div">
<img src="images/logo_bg.jpg"></img>
</div>
<div class="logo_text">
this is logo text.
</div>
<div>
.logo
{
position: reletive;
}
.logo_text
{
position: absulote;
}
当logo区域大小发生变化的时候,用js获得logo区域新的宽和高,把其值传给img的宽和高即可
#7
6 楼 , 按你的方法,图片只能摆在网页顶部吧,我的目的是把图片变成背景.
#8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
#bg {
position: absolute;
z-index: -100;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: 0px;
padding: 0px;
}
#bgimg {
width: 100%;
height: 100%;
margin: 0px;
border-style: none;
}
</style>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
if (!window.event) return;
var bgimg = document.getElementById("bgimg");
var bg = document.getElementById("bg")
bg.onresize = function() {
bgimg.style.width = this.offsetWidth + "px";
bgimg.style.height = this.offsetHeight + "px";
};
bg.onresize();
};
//]]>
</script>
</head>
<body>
<div>
<div id="bg"><img id="bgimg" src="bgpage.jpg" /></div>
<div id="content"><h1>这里放置网页正文内容!</h1></div>
</div>
</body>
</html>
#9
上面代码在 IE7 FF3 下测试都没问题。
#10
根據頁面的情況,顯示背景圖片的大小?
#11
http://interface.eyecon.ro/demos/fisheye.html
有源代码可以下载,大概就是动态的计算长度和宽度,效果还不错!部分引用代码如下:
有源代码可以下载,大概就是动态的计算长度和宽度,效果还不错!部分引用代码如下:
if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'center')
var posx = pointer.x - el.fisheyeCfg.pos.x - (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size())/2 - el.fisheyeCfg.itemWidth/2;
else if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'right')
var posx = pointer.x - el.fisheyeCfg.pos.x - el.offsetWidth + el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size();
else
var posx = pointer.x - el.fisheyeCfg.pos.x;
var posy = Math.pow(pointer.y - el.fisheyeCfg.pos.y - el.offsetHeight/2,2);
//...
#12
我把你的代码考到.html里,测试图片大小不变,怎么回事啊?
就是把鼠标放到浏览器右下角,手动拖大拖小,同时背景图片随窗口大小自动调整。
#13
你用的是 IE6 吧,IE6 下我没测试过。
#14
这段代码是不是只在读入的时候调用一次,在onresize的时候没有调用,所以才会出现他说的大小没有变化的问题啊?
顺便叹一句,你居然已经两星了。。。。
#15
这段代码是不是只在读入的时候调用一次,在onresize的时候没有调用,所以才会出现他说的大小没有变化的问题啊?
顺便叹一句,你居然已经两星了。。。。
[/Quote]
bg.onresize = function() { ... 这句已经把 resize 事件处理代码加到 div 上了。
#16
刚试过,IE6 下确实不好使,我再改改。
#17
打开页面的时候,页面顶部有提示:“为了保护您的安全,Internet Explorer 已经限制此文件显示可能访问您的计算机的活动内容。单击此处查看选项...”
单击,如果选择“允许阻止的内容...” 效果就没有了, 如果直接关闭,效果还保存, 不过放到服务器上以后,浏览器这边默认应该是:“允许阻止的内容...” 所以没效果。
单击,如果选择“允许阻止的内容...” 效果就没有了, 如果直接关闭,效果还保存, 不过放到服务器上以后,浏览器这边默认应该是:“允许阻止的内容...” 所以没效果。
#18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
html, body {
height: 100%;
}
#bg {
position: absolute;
z-index: -100;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: 0px;
padding: 0px;
}
#bgimg {
width: 100%;
height: 100%;
margin: 0px;
border-style: none;
}
</style>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
if (!window.event) return;
var bgimg = document.getElementById("bgimg");
window.onresize = function() {
bgimg.style.width = document.body.clientWidth + "px";
bgimg.style.height = document.body.clientHeight + "px";
};
window.onresize();
};
//]]>
</script>
</head>
<body>
<div>
<div id="bg"><img id="bgimg" src="bgpage.jpg" /></div>
<div><h1>这里放置网页正文内容!</h1></div>
</div>
</body>
</html>
#19
这回 IE6 IE7 FF3 下测试都没问题了。
#20
呵呵 sagezk 厉害,
顺便在问下 ,可以让 <div><h1>这里放置网页正文内容!</h1></div>这个div的高度也随页面大小自动调整吗?
顺便在问下 ,可以让 <div><h1>这里放置网页正文内容!</h1></div>这个div的高度也随页面大小自动调整吗?
#21
解决了, 极度感谢
sagezk !
#22
可以,方法相同。
#1
#2
学习,帮顶
#3
不懂,帮顶一个
#4
document.onresize = function() {
document.getElementById(imgId).width = document.body.clientWidth;
document.getElementById(imgId).height = document.body.clientHeight;
}
没测试
#5
把图片放到<img src=""></img>里
把img再放到需要放置背景图片的div标签里
控制img标签的height和width使其和div标签的高度宽度一致
图片的大小会随img的height,width值的调整而自动缩放
把img再放到需要放置背景图片的div标签里
控制img标签的height和width使其和div标签的高度宽度一致
图片的大小会随img的height,width值的调整而自动缩放
#6
<div class="logo">
<div class="logo_bg_div">
<img src="images/logo_bg.jpg"></img>
</div>
<div class="logo_text">
this is logo text.
</div>
<div>
.logo
{
position: reletive;
}
.logo_text
{
position: absulote;
}
当logo区域大小发生变化的时候,用js获得logo区域新的宽和高,把其值传给img的宽和高即可
#7
6 楼 , 按你的方法,图片只能摆在网页顶部吧,我的目的是把图片变成背景.
#8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
#bg {
position: absolute;
z-index: -100;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: 0px;
padding: 0px;
}
#bgimg {
width: 100%;
height: 100%;
margin: 0px;
border-style: none;
}
</style>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
if (!window.event) return;
var bgimg = document.getElementById("bgimg");
var bg = document.getElementById("bg")
bg.onresize = function() {
bgimg.style.width = this.offsetWidth + "px";
bgimg.style.height = this.offsetHeight + "px";
};
bg.onresize();
};
//]]>
</script>
</head>
<body>
<div>
<div id="bg"><img id="bgimg" src="bgpage.jpg" /></div>
<div id="content"><h1>这里放置网页正文内容!</h1></div>
</div>
</body>
</html>
#9
上面代码在 IE7 FF3 下测试都没问题。
#10
根據頁面的情況,顯示背景圖片的大小?
#11
http://interface.eyecon.ro/demos/fisheye.html
有源代码可以下载,大概就是动态的计算长度和宽度,效果还不错!部分引用代码如下:
有源代码可以下载,大概就是动态的计算长度和宽度,效果还不错!部分引用代码如下:
if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'center')
var posx = pointer.x - el.fisheyeCfg.pos.x - (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size())/2 - el.fisheyeCfg.itemWidth/2;
else if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'right')
var posx = pointer.x - el.fisheyeCfg.pos.x - el.offsetWidth + el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size();
else
var posx = pointer.x - el.fisheyeCfg.pos.x;
var posy = Math.pow(pointer.y - el.fisheyeCfg.pos.y - el.offsetHeight/2,2);
//...
#12
我把你的代码考到.html里,测试图片大小不变,怎么回事啊?
就是把鼠标放到浏览器右下角,手动拖大拖小,同时背景图片随窗口大小自动调整。
#13
你用的是 IE6 吧,IE6 下我没测试过。
#14
这段代码是不是只在读入的时候调用一次,在onresize的时候没有调用,所以才会出现他说的大小没有变化的问题啊?
顺便叹一句,你居然已经两星了。。。。
#15
这段代码是不是只在读入的时候调用一次,在onresize的时候没有调用,所以才会出现他说的大小没有变化的问题啊?
顺便叹一句,你居然已经两星了。。。。
[/Quote]
bg.onresize = function() { ... 这句已经把 resize 事件处理代码加到 div 上了。
#16
刚试过,IE6 下确实不好使,我再改改。
#17
打开页面的时候,页面顶部有提示:“为了保护您的安全,Internet Explorer 已经限制此文件显示可能访问您的计算机的活动内容。单击此处查看选项...”
单击,如果选择“允许阻止的内容...” 效果就没有了, 如果直接关闭,效果还保存, 不过放到服务器上以后,浏览器这边默认应该是:“允许阻止的内容...” 所以没效果。
单击,如果选择“允许阻止的内容...” 效果就没有了, 如果直接关闭,效果还保存, 不过放到服务器上以后,浏览器这边默认应该是:“允许阻止的内容...” 所以没效果。
#18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
html, body {
height: 100%;
}
#bg {
position: absolute;
z-index: -100;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: 0px;
padding: 0px;
}
#bgimg {
width: 100%;
height: 100%;
margin: 0px;
border-style: none;
}
</style>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
if (!window.event) return;
var bgimg = document.getElementById("bgimg");
window.onresize = function() {
bgimg.style.width = document.body.clientWidth + "px";
bgimg.style.height = document.body.clientHeight + "px";
};
window.onresize();
};
//]]>
</script>
</head>
<body>
<div>
<div id="bg"><img id="bgimg" src="bgpage.jpg" /></div>
<div><h1>这里放置网页正文内容!</h1></div>
</div>
</body>
</html>
#19
这回 IE6 IE7 FF3 下测试都没问题了。
#20
呵呵 sagezk 厉害,
顺便在问下 ,可以让 <div><h1>这里放置网页正文内容!</h1></div>这个div的高度也随页面大小自动调整吗?
顺便在问下 ,可以让 <div><h1>这里放置网页正文内容!</h1></div>这个div的高度也随页面大小自动调整吗?
#21
解决了, 极度感谢
sagezk !
#22
可以,方法相同。