IE6不支持png,支持gif透明,IE6的png不透明可以用JavaScript,或css滤镜,或htc文件解决,这个以前就知道,也用过js解决过png问题,没有遇到什么麻烦,可是今天,遇到复杂的png背景,遇到了很大的麻烦,不过也学到了很多,不得不记下来。
我们要制作一个背景随时间变换的页面,页面上文字按钮等不变,所以这些文字按钮等必须背景透明,因为页面背景图片都是复杂的整图,有实色背景实在不好看。另一方面,由于页面button按钮有水晶效果和羽化效果,所以用gif肯定使图片失去原来的质感和美感。所以必须得用png背景。
我不清楚他们(同事,该页面开始不是我做的)用的是哪个是png透明的方法,但是他们的方法要使IE6下png背景透明background图片不能简写,即background:url("xx.png") no-repeat top right失效,需写成background-image:url("xx.png"); background-repeat:no-repent;...;确实,png透明了,但是但是,background-position却没有作用,一般的图,一张图,直接定义个大小,设个背景图片就ok了。但是我们遇到的情况比较特殊,所有的按钮都是在一张图上的,这个不能用background-position定位,效果是根本不能实现的。怎么该都没有用。他们是遇到了这样的问题。
我也调试了很久,确实搞不定。于是决定调整思路,不能用background-position定位,我在想,可否使用绝对定位,然后像flash一样遮罩一下,只显示那块区域。网上找方法时看到了一个标签clip,正好上星期研究了一下clip的剪裁,觉得可以用这个解决定位的问题。于是构思了一下,写了如下的代码:
<style type="text/css">
查看更多...
Tags: DIVDIV pngpng