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下透明的背景图片会有默认的阴影,要解决这个问题可以有这么几种方法

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

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

原文提到:

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

 Fireworks >>文件>>导出向导

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

图示

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

第三种:使用滤镜。

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://a.xnimg.cn/xnapp/music/images/dot_2.png");
_background: none;

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

css透明背景兼容方案的更多相关文章

  1. 使用RGBa和Filter实现不影响子元素的CSS透明背景

    点击查看原文 问题 如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题,一是为了适应所 ...

  2. 【原】CSS实现背景透明,文字不透明,兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  3. CSS实现背景透明,文字不透明,兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  4. CSS实现背景透明,文字不透明(各浏览器兼容)

    /*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; ...

  5. CSS实现背景透明,文字不透明(各浏览器兼容) (转)

    /*CSS*/ .waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center ...

  6. CSS实现背景透明,文字不透明(兼容所有浏览器)

    我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例: 打开ps,在图层面板上,可以看到设置图层整理不透明度的菜单,从 0% (完全透明)到 100%(完全不透明). 实现透明的css方 ...

  7. CSS实现背景透明而背景上的文字不透明完美解决

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  8. CSS实现背景透明/半透明效果的方法

    全透明代码:{background:transparent} 半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !importan ...

  9. CSS实现背景透明而背景上的文字不透明

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

随机推荐

  1. javascript模式——Facade

    Facade模式为许多代码提供一个方便的接口,不现实代码实现的复杂性,这样,使用者只需要关心他的使用接口就可以使用. 下面来看一段Facade模式的运用,绑定事件在浏览器之间是不一样的,利用Facad ...

  2. powerdesigner 转换各种数据库SQL

    转各种SQL脚本的步骤 一.

  3. [Linked List]Reverse Nodes in k-Group

    Total Accepted: 48614 Total Submissions: 185356 Difficulty: Hard Given a linked list, reverse the no ...

  4. 开发环境配置--Ubuntu+Qt4+OpenCV(三)

    同系列文章 1. 开发环境配置--Ubuntu+Qt4+OpenCV(一) 2. 开发环境配置--Ubuntu+Qt4+OpenCV(二) 3. 开发环境配置--Ubuntu+Qt4+OpenCV(三 ...

  5. leetcode算法刷题(四)——动态规划(二)

    又到了晚上,动态规划,开刷! 第121题 Best Time to Buy and Sell Stock 题目的意思:给予一个数组price,表示特定股票在某天的股价,里面第i个数表示第i天的价格.只 ...

  6. C的陷阱和缺陷研读笔记01

    词法分析: 编译器将程序分解成符号的方法是 从左到右一个一个字符的读入,如果该字符可能组成一个符号,再读入下一个字符 而c语言里的符号 / * =只有一个字符长, 是单字符的, /* == 一些事双字 ...

  7. Keli Linux与网络安全(2)——初探Keli

    Kali是BackTrack的升级换代产品,按照官方网站的定义,Kali Linux是一个高级渗透测试和安全审计Linux发行版.作为使用者,我简单的把它理解为,一个特殊的Linux发行版,集成了精心 ...

  8. 帮助中心 7D-我的私家设计师 设计师品牌服饰集成网 7D服装定制!

    帮助中心 7D-我的私家设计师 设计师品牌服饰集成网 7D服装定制! 关于我们

  9. makefile编写差异

    由于zlib动态库在linux下引用的问题引出了对于简练的makefile的学习.之前通过看网络上的一些文章自己也算简单了解如何编写一个makefile,可总是不那么美观,今天经过辉哥的指点,对于ma ...

  10. heap creation

    There two methods to construct a heap from a unordered set of array. If a array has size n, it can b ...