这篇汇总主要是提供一些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. SpringBoot和微服务

    SpringCloud SpringBoot 概念 应用 微服务CAP Consistency(数据强一致性),Availability(服务可用性),Partition-tolerance(分区容错 ...

  2. shell rename directory

    mv can do two jobs. It can move files or directories It can rename files or directories To just rena ...

  3. NOI.AC WC模拟赛

    4C(容斥) http://noi.ac/contest/56/problem/25 同时交换一行或一列对答案显然没有影响,于是将行列均从大到小排序,每次处理限制相同的一段行列(呈一个L形). 问题变 ...

  4. bzoj 3837 (随机过题法了解一下)

    3837: [Pa2013]Filary Time Limit: 60 Sec  Memory Limit: 256 MBSubmit: 395  Solved: 74[Submit][Status] ...

  5. Codeforces Round #234 (Div. 2) B. Inna and New Matrix of Candies SET的妙用

    B. Inna and New Matrix of Candies time limit per test 1 second memory limit per test 256 megabytes i ...

  6. spring---aop(1)---AOP概念

    写在前面 由于spring的事务系列,可以带出spring的aop.spring的事务只是spring的一个具体实现 名词解释 通知.增强处理(Advice) 就是你想要的功能,也就是上说的安全.事物 ...

  7. SecureCRT 如何改变对话框--每行输入字符数的多少

    通过设置Logical columns的大小,选中Retain size an font来改变每行输入字符数的多少 1.设置Session Options–>Terminal–>Emula ...

  8. TransactionScope只要一个操作失败,它会自动回滚,Complete表示事务完成

    实事上,一个错误的理解就是Complete()方法是提交事务的,这是错误的,事实上,它的作用的表示本事务完成,它一般放在try{}的结尾处,不用判断前台操作是否成功,如果不成功,它会自己回滚. #re ...

  9. QQclient团队博客

    Windows 8 视频採集  http://impd.tencent.com/?p=25 句柄泄漏检測工具的实现原理 http://impd.tencent.com/?p=29

  10. 在Win7环境下安装启动Linux

    在Win7环境下安装启动Linux 在Win7系统下,安装启动Linux特别的不方便,由于XP下的boot.ini配置文件不在了,要加入�一下启动选项的话, 仅仅能使用专门的工具,这或多或少给人带来不 ...