CSS透明效果总结

转载 2012年03月24日 22:23:05
如果网页中加入透明效果,即美观又漂亮,使用户的体验度提升很多,这次上海网站设计公司为您讲述该怎么样实现CSS的透明效果,以及使CSS技术兼容您的所有浏览器。


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


一、旧的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引擎)已经不在支持这个属性。


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


#myElement { opacity: .7; }
上述语法将设置一个元素为70%不透明(或30%透明)。设置opacity:1将使元素不透明,而设置opacity:0将使得元素完全不可见。你 只要记住“opacity”等同于“不透明”就很容易记住了,opacity值越小就越接近透明。
opacity属性可以精确地小数点后两位,所以值取“.01”和“.02”实际上是不同的,虽然可见度很难被发觉。一般情况下,精确到一位就可以了,取值如“.3”或“.7”。


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


#myElement {      filter: alpha(opacity=40);  }
上面的CSS使用专用的filter属性来设置IE6-8透明度。对于IE6和IE7需要注意:为了使得透明设置生效,元素必须是“有布局”。一个元素 可以通过使用一些CSS属性来使其被布局,有如width 和 position。关于微软专有的hasLayout属性详情,以及如何触发它,上海网站设计公司欢迎参考86215.com相关文档。
另外一个设置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”的方法。


四、使用JavaScript设置和改变CSS透明度
您可以使用下面的语法访问JavaScript中的CSS opacity 属性:


document.getElementById(“myElement”).style.opacity = ”.4〃;
// 针对所有现代浏览器  document.getElementById(“myElement”).style.filter =    ”alpha(opacity=40)”;
// 针对IE
上面的代码可以使用行内循环或者其他动态函数递增修改透明度的值。当然,你必须先通过特征检测来决定使用哪一行代码。


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


$(“#myElement”).css({ opacity: .4 }); // 所有浏览器有效
您也可以使用一下jQuery代码使一个元素动画透明:
$(“#myElement”).animate({      opacity: .4      }, 1000, function() {
// 动画完成,所有浏览器下有效  });
不管元素的透明度在动画开始时是多少,它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定,动画时间以毫秒为单位。代码中的最后一个属性是一个可选回调函数,将在动画完成后执行。
如果该元素的透明度在CSS中已经设定为“.4”,那在动画运行的时候,你将不会发觉有任何不同,所以动画开始和最终透明度要有所不同。


六、通过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的数字,精确得到两位小数点。数字值越大,就越接近完全不透明的颜色。


七、通过 HSLA的透明度
类似之前的定义,CSS3还允许使用HSLA单独设置颜色和alpha值,HSLA表示Hue(色调), Saturation(饱和度), Lightness(亮度), 和Alpha。以下是上海网站设计公司列举的HSLA透明的例子:


#hsla {      background: hsla(207, 38%, 47%, .4);  }
        如同RGBA透明度,最后的数字表示透明度设置,跟RGBA起同样的作用。注意RGBA 和HSLA透明度的一个重要的好处是这些透明度设置不会影响到子元素的,但通过opacity属性的方式则会。alpha设置的RGBA和HSLA只影响 背景颜色的透明度,说到这里是不是觉得很简单,呵呵,上海网站设计公司关于CSS的透明效果的讲解就说道这里,欢迎您继续关注上海网站设计公司的其他讲述。

CSS实现表单元素透明效果

  • 2008年09月11日 09:35
  • 390B
  • 下载

css技巧:实现圆角、阴影、透明效果

CSS技巧:圆角效果 切1个透明的圆形图片(这个图片要求圆角内测是透明的,而外侧是不透明的),用绝对定位来显示4个圆角,这样做的好处是只使用1个图片,即可以实现任何大小,任何背景颜色的box圆角,代码...

【CSS3 探索发现】系列二:打造一组闪亮的半透明按钮效果

这是《CSS3 探索发现》系列文章的第二篇,分享一组闪亮的半透明 CSS3 按钮效果。CSS3 为网页设计引入了众多强大的新功能,让设计和开发人员能够轻松的创作出精美的界面效果。推荐阅读:《CSS3 ...

看截图:给图片罩上一层半透明文字描述效果(二)DIV+CSS+SPAN

前面一篇例子是基本满足应用,有人会问能不能在调整一下?可能想:那个半透明文字能不能不要跟照片宽度一致,想在外面在套个容器,文字与容器宽度一致,图片在容器中居中显示;于是乎我也想到了这个问题,于是下班后...

CSS滤镜实现半透明效果,兼容IE,火狐,谷歌浏览器

转自:http://www.dianyisheji.com/?helpview-104 在做一个项目的前端开发的时,遇到这样一个问题,有一块内容是半透明效果,同时底层的背景图片需要能够实现更换,如图...
  • dzf203
  • dzf203
  • 2013年08月13日 17:08
  • 785

CSS3----透明滤镜效果

支持主流浏览器,--Firefox,Chrome,IE7/8/9---IE6目前不支持 HTML: /*80%的透明效果:*/ ...
  • damys
  • damys
  • 2013年05月03日 16:11
  • 770

CSS实现半透明效果实现及兼容性

网页半透明效果经常在一些很酷网站中用到,虽然说现在还没有被纳入W3C标准中,但对于CSSer们还是很热捧的。从网上收集并整理了一下以后备用。 1. 旧的Opacity设置 以下代码是Firef...

CSS实现半透明效果实现及兼容性

网页半透明效果经常在一些很酷网站中用到,虽然说现在还没有被纳入W3C标准中,但对于CSSer们还是很热捧的。从网上收集并整理了一下以后备用。 1. 旧的Opacity设置 以下代码是Firef...

使用IE滤镜实现css3中rgba让背景色透明的效果

让背景透明,听上去不是挺容易的么? 让背景色透明,很容易想到opacity,要兼容IE的话只要加上filter:alpha(opacity=?)就行了,OK,看看这个例子。 html: d...

CSS实现透明效果颜色的方法:RGBa

RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语法是这样的: 1 2 3 div { background: rgba(200, 54, 54,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS透明效果总结
举报原因:
原因补充:

(最多只允许输入30个字)