在网页中设定根据元素大小伸缩的背景图
2006-11-30 15:53
239 查看
最近研究了一下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;"
另外对于其他的游览器没有试过。
首先需要一个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;"
另外对于其他的游览器没有试过。
相关文章推荐
- 3.1 Javascript:探索客户端-设置网页元素根据窗口比例调整位置与大小
- 让网页背景图片 根据屏幕大小自动铺满
- Javascript 动态编程--动态设置网页元素是否可见,是否可用,改变大小,动态插入文字,进度条,动态改变背景例子
- html 网页背景图片根据屏幕大小CSS自动缩放
- CSS背景图片自适应 根据浏览器分辨率大小自动伸缩
- 根据数据库动态设定gridview单元格的背景颜色
- 网页背景图片自适应浏览器大小
- CSS3:元素的边框、背景和大小
- JS获取网页窗口大小、浏览器窗口大小、页面元素位置
- java 添加背景图片(可根据窗口大小自动调整显示图片)
- css 背景图片自适应元素大小
- 手写NSButton设置的背景图片为什么不会随着Button的大小进行伸缩变换?
- html2canvas根据DOM元素样式实现网页截图
- 网页怎么根据用户屏幕大小自动调整网页宽度?
- 鼠标拖动改变DIV等网页元素的大小的实现方法
- 【UGUI】UGUI 文字背景根据文字大小自适应(二)
- 改变网页中的浏览风格(字体大小和背景颜色)
- CSS根据用户需求设置网页字体大小
- 需求:UIView 设置背景图,并根据屏幕大小自动铺满缩放
- 根据Button背景图片长宽比调整Button大小