百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> css透明背景不兼容解决办法详解
分享文章到:

css透明背景不兼容解决办法详解

发布时间:01/15 来源: 浏览: 关键词:
很多开发都做css背景透明我都直接使用filter:alpha(opacity=80)来设置,这个在ie6下是无法兼容的,下面我来给大家整理了一些解决不兼容ie6问题的方法。

css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样子写的。

 代码如下

.transparent_class {

/* IE 5-7 */
filter: alpha(opacity=50);

/* Netscape */
-moz-opacity: 0.5;

/* Safari 1.x */
-khtml-opacity: 0.5;

/* Good browsers */
opacity: 0.5;
}

这里我们使用的是整个层的一个透明,当你使用了上面这个代码之后,那里面的文字和图片都会变透明了,但有时候我们需要的知识背景颜色透明,或者背景图片的一个透明。

1.背景图片透明

又是一个兼容问题了,IE8及以下的不支持rgba(RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 – 它规定了对象的不透明度。),下面这个代码是网上比较流行的一个写法,支持IE系列浏览器,不过前辈的经验是少用哦。

 代码如下

.hex_color {
 filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7FFF0000', endColorstr='#7FFF0000');
}
:root .hex_color {
 filter:none;  /*处理IE9浏览器中的滤镜效果*/
 background:rgba(255,0,0,0.5);
}

2.透明背景图片

我们都知道IE6下透明的背景图片会有默认的阴影,要解决这个问题可以有这么几种方法

a.使用jsDD_belatedPNG来实现,话说淘宝腾讯这些的都不用这些插件的,也许他们都是通过css来解决的吧

b.把图片保存为png8的格式,我们都知道png8保存的时候会有一些阴影和锯齿的影响。今天在一篇文章里面看到可以用firework来导出png8.

原文提到:

在fireworks里一定要使用导出alpha 透明的png8,而不是保存alpha 透明的png8。
步骤:

 代码如下

 Fireworks >>文件>>导出向导

然后一步步往下会得到下图界面,保存就好了:

图示
用这个保存方法解决了毛边的问题,这样就不会有是使用png8坚硬的边缘或者使用png24的蓝底问题了。但图片的半透都成了全透,所以如果图片有半透的,并且半透是需要保留的,那么现在我的办法只有使用png24格式在IE6下使用滤镜。

c.使用滤镜。

 代码如下

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/dot_2.png");
_background: none;

d.除了png8之外,使用gif和jpg就是另外一种方案。可以分出IE6和其他浏览器的两种不同图片格式,图个兼容呗。

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有9人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板