WonderCSS

CSS中涉及到透明度的笔录

在写CSS中由于英文水平的原因,经常会忘掉某个单词怎么写,尤其是一些CSS3新属性在编辑器里无法提示的。遇到这个情况通常就是GOOGLE翻译,或查找以往写过的样式表。如今为备忘将一些相似类别的属性记录下来,如关于透明度的 opacity 、transparent 、alpha。

opacity:0.5;

opacity 是物体/容器的不透明度。关于它的应用可以很灵活,比如放到锚链接的 a:hover 属性上,尤其是放到图片的hover上很漂亮。

涉及到浏览器的兼容问题我们可以这么写:


.transparent {  
    filter:alpha(opacity=50);  
    -moz-opacity:0.5;  
    -khtml-opacity:0.5;  
    opacity:0.5;  
}

background-color:transparent;

transparent 是透明度。background-color的默认值就是transparent,他和经常写的 background-color:none 是有所区别的,具体区别这要体现在CSS结构的逻辑性上。

color:rgba(0,104,183,0.5);

CSS的RGBA颜色值是随CSS3而来的新属性,他在光源三原色红绿蓝的基础上多了一个不透明度 alpha 。由于是CSS3特有,所以目前还不被多数浏览器支持,值得注意。

By 于湛 发布于 2013.02.18 3,524 次浏览

CSS中涉及到透明度的笔录》上有2条评论

  1. 王小晓

    在IE8里无效啊,旧版本IE识别哪种样式?IE8目前占大多数浏览器哦

    回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注