如何在网页中设定根据元素大小伸缩的背景图?
如何在网页中设定根据元素大小伸缩的背景图?
最近研究了一下CSS,发现了些有趣的问题,原来W3C的标准也不是统一地在每个游览器是能够一致。当然也有一些CSS棘手的难事,背景图就是一个问题,CSS只支持背景图放置的位置设定以及如何平铺,想拉伸是没有办法的。于是给出一个解决办法:首先需要一个javascript的函数:
function setAutoBack(obj,img) { try { var dyback = document.getElementById(obj); img.style.height = dyback.offsetHeight; img.style.left = dyback.offsetLeft; img.style.top = dyback.offsetTop; img.style.width = dyback.offsetWidth; img.style.zIndex = -1; } catch(ee) { try { img.style.display="none"; } catch(err) { } } }
然后在页面中写一个<IMG>:
<img src="back.jpg"onload="setAutoBack('targetID',this)" style="position:absolute;">
上面的“back.jpg"是背景图,"targetID"是被设定HTML元素的ID。
最后还要请注意一点,就是在IE下这样就可以了,但以firefox中则另需要在<BODY>中加入样式: style="z-index:0;position:absolute;"
另外对于其他的游览器没有试过。