这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释,以实现这项有用的CSS技术在您的项目中兼容所有浏览器。

  关于CSS 透明度,有一点需要注意的是,它虽然使用了很多年,但它一直以来都不是一个标准属性。它是一种非标准技术,应该是CSS3规范的一部分。

1. 旧的Opacity设置

  以下代码是Firefox和Safari旧版本所需的透明度设置:

#myElement {      -khtml-opacity: .5;      -moz-opacity: 0.5;  }

  -khtml-opacity设置是针对旧版本的Webkit渲染引擎,这种专用属性现在已经过时了,除非你还有需要兼容Safari 1.x.的用户。

第二行使用专用属性 -moz-opacity是 为了兼容Mozilla渲染引擎的早期版本,以及追溯到Netscape Navigator。Firefox 0.9以后就不要求使用-moz-opacity属性,Firefox 3.5(现在使用Gecko引擎)已经不在支持这个属性。

2. 在Firefox, Safari, Chrome和Opera下的CSS透明度

  以下代码是除了IE外的所有当前浏览器的最简单,最最新的不透明度设置的CSS语法:

#myElement {      opacity: .7;  }

  上述语法将设置一个元素为70%不透明(或30%透明)。设置opacity:1将使元素不透明,而设置opacity:0将使得元素完全不可见。你 只要记住“opacity”等同于“不透明”就很容易记住了,opacity值越小就越接近透明。

  opacity属性可以精确地小数点后两位,所以值取“.01”和“.02”实际上是不同的,虽然可见度很难被发觉。一般情况下,精确到一位就可以了,取值如“.3”或“.7”。

3. IE下的CSS透明度

  IE下照旧有别于其他浏览器,并且目前也有三个不同版本的IE在广泛使用,透明度设置是不同的,有时需要额外的CSS来控制:

#myElement {      filter: alpha(opacity=40);  }

  上面的CSS使用专用的filter属性来设置IE6-8透明度。对于IE6和IE7需要注意:为了使得透明设置生效,元素必须是“有布局”。一个元素可以通过使用一些CSS属性来使其被布局,有如width 和 position。关于微软专有的hasLayout属性详情,以及如何触发它,参考这里。

  另外一个设置IE8的CSS透明度的方法语法如下(注意注释中指出的版本):

#myElement {      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);     /* 第一行在IE6, IE7和IE8下有效 */     -ms-filter:       "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";    /*第二行仅在IE8下有效 */}

  第一行代码针对当前所有IE版本,第二行仅针对IE8。

  注意两行代码的不同之处:在第二行代码中,在filter属性前跟着-ms-前缀,并且属性值有加引号,这些都是语法所必须的。

  说实在,有了如前一个例子中用alpha(opacity=40)的语法来作用于任何版本的IE下的任何有布局的元素之后,我也不确定是否还有必要用“progid”的方法。

4. 使用JavaScript设置和改变CSS透明度

  您可以使用下面的语法访问JavaScript中的CSS opacity 属性:

document.getElementById("myElement").style.opacity = ".4";  // 针对所有现代浏览器  document.getElementById("myElement").style.filter =    "alpha(opacity=40)";// 针对IE

  上面的代码可以使用行内循环或者其他动态函数递增修改透明度的值。当然,你必须先通过特征检测来决定使用哪一行代码。

5. 使用JQuery设置和改变CSS透明度

  直接使用jQuery设置CSS透明度更直观更容易实现,因为在所有浏览器代码都一样,并且你不必担心在IE下元素是否“haslayout”:

$("#myElement").css({ opacity: .4 }); // 所有浏览器有效

  您也可以使用一下jQuery代码使一个元素动画透明:

$("#myElement").animate({      opacity: .4      }, 1000, function() {      // 动画完成,所有浏览器下有效  });

  不管元素的透明度在动画开始时是多少,它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定,动画时间以毫秒为单位。代码中的最后一个属性是一个可选回调函数,将在动画完成后执行。

  如果该元素的透明度在CSS中已经设定为“.4”,那在动画运行的时候,你将不会发觉有任何不同,所以动画开始和最终透明度要有所不同。

6. 通过 RGBA的透明度

  另一个CSS3技术只支持部分新的浏览器(Firefox 3+, Opera 10.1+, Chrome 2+,Safari 3.1+),可通过RGBA的alpha通道的方式设定。语法如下:

#rgba {      background: rgba(98, 135, 167, .4);  }

  在上面的定义中,通过RGB(前三个数字)给背景设定颜色,然后最后一个是alpha设置,以执行给定颜色的透明度。这个alpha设置跟opacity 属性一样,可设定任何0到1的数字,精确得到两位小数点。数字值越大,就越接近完全不透明的颜色。

7. 通过 HSLA的透明度

  类似之前的定义,CSS3还允许使用HSLA单独设置颜色和alpha值,HSLA表示Hue(色调), Saturation(饱和度), Lightness(亮度), 和Alpha。以下是HSLA透明的例子:

#hsla {      background: hsla(207, 38%, 47%, .4);  }

  更多关于HSLA颜色的解释,参考这篇来自W3.org的文章。如同RGBA透明度,最后的数字表示透明度设置,跟RGBA起同样的作用。注意RGBA和HSLA透明度的一个重要的好处是这些透明度设置不会影响到子元素的,但通过opacity属性的方式则会。alpha设置的RGBA和HSLA只影响背景颜色的透明度,仅此而已。

CSS 过滤器 兼容ie,火狐和谷歌的更多相关文章

  1. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  2. js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现,兼容火狐,谷歌;canvas截屏跨域问题,无音频视频流加载不显示问题

    项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...

  3. css各兼容应该注意的问题

    1.div布局在ie浏览器和chrome浏览器,firefox浏览器不同,不如在div里面嵌套3个div,分别左中右,左边div的pading和margin在ie8以上都是几乎相同,ie8以下做内边距 ...

  4. CSS中兼容的一面-----Hack

    国庆了,出去玩耍,也有好长时间没有更新博客了.. 今天就和大家共享一篇技术博文吧.. CSS中兼容的一面-----Hack技术大全 兼容范围: IE:6.0+,FireFox:2.0+,Opera 1 ...

  5. css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...

  6. CSS3_3D效果(IE10_火狐_谷歌)

    好久没写博客了,看了下记录,上次最后写的最后一篇已经是8月1号了,最近有些小东西整理下,当巩固吧 废话少说,直奔本文主题 css3提供了很多新鲜好玩的东西,transform就是其中一个,可以进行 2 ...

  7. ie6,ie7,ie8 css bug兼容解决记录

    ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...

  8. CSS过滤器

    CSS过滤器(CSS filters)最初是为了向SVG矢量图提供不同的图片效果.现在,CSS filters 不在局限于在SVG中使用,也可以在图片.文字和其它元素上使用.CSS过滤器效果并不难理解 ...

  9. IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

    浏览器兼容问题一直是前段开发工程师比较头痛的问题,熟悉了里面的规则也就变得简单了,这里有一份资料可以分享给大家,大家平时开发过程中遵循这个规律的话,会变得轻松多了: 各浏览器CSS hack兼容表: ...

随机推荐

  1. dSploitzANTI渗透教程之修改MAC地址与Wifi监听器

    dSploitzANTI渗透教程之修改MAC地址与Wifi监听器 dSploitzANTI基本配置 渗透测试是一种安全性较大的工作.所以,在实施渗透测试之前进行一些简单设置.如修改MAC地址.了解网络 ...

  2. event使用说明和DHTML参数属性

    event 对象 代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态. DHTML元素属性列表 属性 描述 abstract 使用 event 对象获取高级流重定向器(ASX)文件中项目 ...

  3. QT学习笔记4:QT中GraphicsView编程

    一.QGraphicsScene 1.QGraphicsScene QGraphicsScene继承自QObject,是一个管理图元的容器,与QGraphicsView合用可以在2D屏幕上显示如线.三 ...

  4. 【转】说下lua使用场景

    [今日话题]说下lua使用场景 – flea 1. 我们有用,一些逻辑相对简单,没有复杂的数据交互,访问频次超高的接口实现,可以用lua,省得用phpfpm,太重,浪费资源. – 付坤   2. 也可 ...

  5. Codeforces Round #298 (Div. 2) E. Berland Local Positioning System 构造

    E. Berland Local Positioning System Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.c ...

  6. 【bzoj2005】 [Noi2010]能量采集 数学结论(gcd)

    [bzoj2005] [Noi2010]能量采集 Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnli ...

  7. UVALive 4868 Palindrometer 暴力

    F - Palindrometer Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit ...

  8. Linux知识(7)----远程登录 和远程拷贝

    一.远程登录 1.安装客户端 可以使用ssh(Secure Shell(缩写为SSH))来进行远程的登录.安装ssh的命令为: sudo apt-get install openssh-server ...

  9. Oracle DBA学习篇之SQL_TRACE

    SQL_TRACE ; ; set serveroutput on; alter session set sql_trace=true; select count(*) from firefox; a ...

  10. Pyhton 编程风格

    博文概要:1.Python语句和语法2.Python标识符3.基本编程风格 一.Python语句和语法 1.可以从一行的任何地方开始2.续行 \: ''':闭合操作符,单一语句跨多行 3.代码组 .缩 ...