微博客
关于背景图像透明

      关于背景图像透明,我们利用PNG图片支持半透明的特性来达到我们要的效果,除ie6-浏览器不支持PNG的透明外,其他的标准浏览器都支持,因此下面我们主要解决修复ie6不支持PNG透明的Bug。
       互联网上解决IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e­xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中 backgrond-position与background-repeat.

       而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及<img>.

       这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.
使用方法

1.在这里下载DD_belatedPNG.js文件.
2.在网页中引用,如下:
<!--[if IE 6]>
<script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>
<script type="text/javascript"><!
<!
/* EXAMPLE */
DD_belatedPNG.fix('.png_bg');
/* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/
// -->

3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.
使用a:hover请留意

5-25更新:如果你也像jutoy同学一样想要用透明PNG作为a:hover时的背景图片,那么你需要留意你的代码,需要以”a:hover”来作为选择器.否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码:


<!--[if IE 6]>
    <script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
    <script type="text/javascript">
    DD_belatedPNG.fix('.trans,.box a:hover');
    </script>
<![endif]-->
下面是翻译自官方说明Known Issues的文字:
1、 vml语法针对的对象是DOM元素的子对象,因此你如果试图把fix()函数加在<body>标签上,那是没有用的;于是,你可能会想到:那 我在body里面套一个wrapper元素来代替<body>元素总该可以把?这确实能使fix()函数工作了,但这将会大大降低页面的性能 的。
2、此函数对<tr><td>标签支持的不是很好,所以请尽量不要把函数用在这上面。
3、这个脚本不支持backgroud-attchment:fixed
4、如果你想修复<img>标签的话,那请你加上visibity:hidden,尽管你加上了这段代码,还是会使得<img>标签元素变的不可点击,我仅想到一种解决方案,那就是用纯透明的gif图像来代替链接,至于代码我之后会加上的。
5、对于<INPUT type="image"/> 标签,脚本同样也不支持,需要您加上visibity:hidden,然后在背景中定义。
6、和alpha (opacity)滤镜比起来,这个文档宣称的“元素都可点击”效果不是怎么好,示例文件中时有失效的情况发生,到现在我还没有找到解决的方案。
8、 脚本是通过js字符串搜索检测png图片存在的,如果你的网页中有链接不是以“.png”结尾的话,你很不幸运,这会导致脚本出错的。我倒是希望有一个 “强制(以.png结尾)”选项存在,如果你需要的话,请让我知道(这条读起来有点绕口,我理解的意思是:请不要在你的网页代码中出项非png图片的 “.png”字样)


其他方案

在这里还是提供其他方案供大家参考.尽管我觉得DD_belatedPNG最好  

转发自:eddie.Yang's creative

说明添加:齐鲁科技工作室


背景色透明兼容解决方案

      css3.0为我们提供了一个支持背景色透明的颜色值写法:RGBA(R红G绿B蓝A透明度),但是这个写法IE系列浏览器不支持,因此我们通过ie的渐变滤镜来实现兼容(渐变滤镜的颜色值要填写4通道的颜色值,可利用下面的小工具进行颜色值的转化)。
注意:IE滤镜须是在一个有宽高设置的容器中,或者激活haslayout的属性。教程链接
 
 
兼容代码:
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7F009966', endColorstr='#7F009966');background:rgba(0,153,102,0.5);

十六位颜色值和渐变滤镜颜色值转换工具


posted on 2011-04-01 08:30  飞鸟42  阅读(1137)  评论(0编辑  收藏  举报