一个浮动在页面任意位置的层的好的实现

最新推荐文章于 2024-04-23 08:56:58 发布

原创最新推荐文章于 2024-04-23 08:56:58 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #脚本 #css #ie

本文介绍了一种在IE6浏览器环境下实现PNG图片透明效果的方法。通过JavaScript动态生成HTML结构，并利用CSS及IE专有滤镜，使得PNG图片能够正确显示透明背景。此方案解决了在调整浏览器窗口大小时，背景图片变化导致Logo位置错位的问题。

document.writeln("<DIV align=/"center/" style=/"z-index:100005;width:100%; position:absolute; left:0px; top:0px;padding-top:10px;/">"); document.writeln(" <div style=/"width:821; height:100;/">"); document.writeln(" <div style=/"float:left;width:102px;height:96px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.jingjiba.com/v/Images/logoNew.png);'/">"); document.writeln(" <//div>"); document.writeln(" <//div>"); document.writeln("<//div>");

代码解析:

1、最外边的层是用来实现绝对定位

2、第二个层是用来设置居中后左边的位置

3、第三个层通过Css来实现加载一个PNG图片,通过滤镜实现图片在IE6下面的背景的消除

我一般的思路就是通过JS脚本来输出一个层,然后算该层的位置,但是有的时候会出现如果双击改变窗口的大小的话,那么我要让该层跟着一个图片,例如背景图片上放logo,我想要让Logo浮动在背景图片上,那么我让Logo跟着背景图片改变位置,js会出现背景图片位置变了之后,logo接着再切换过去的时间延时,但是上面这种方法就不会了.