在网页中设定根据元素大小伸缩的背景图

来源：互联网发布：量子计算机编程语言编辑：程序博客网时间：2024/05/09 03:31

最近研究了一下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;"

另外对于其他的游览器没有试过。