CSS透明度之rgba和opacity的区别

html-css024

CSS透明度之rgba和opacity的区别,第1张

在CSS样式中,设置透明度的方式有两种。其一, opacity ;其二 rgba() 。

opacity 和 rgba() 在一定程度上是没什么区别。

1、opacity

取值在0到1之间,0表示完全透明,1表示完全不透明。

2、rgba

rgba语法:

rgba()和opacity都能实现透明效果,主要区别有以下2点:

比如,我们写透明的黑色部分都是用opcity(0.3),但这带出来一个问题就是如果你在这一div上写字的话,然后那个字体也会变成透明色。所以我们采取rgba的样式写,前面三个数字分别对应r,g,b,的三种颜色,第四位的数字对应的是透明的系数。

使用CSS的Chroma滤镜可以把字体颜色设置为透明样式。

<style type="text/css">

<!--

body{background-color:#999999}

/*滤镜中设置的颜色要和字体的颜色相同*/

#tm{color:#FF0000filter:chroma(color=#FF0000)

}

-->

</style>

将Chroma滤镜的颜色和字体的颜色设置为相同时,不论网页的背景颜色如何设置,字体的颜色都会显示为透明。

在浏览器中查看使用CSS滤镜把字体的颜色设置为透明的显示效果。如下图所示:

亲,我们经常会使用到背景图片,但有时候需要把背景图片设置一个半透明的效果,那么就需要以下的CSS了。这是一个CSS滤镜达到的效果,应用十分广泛。

.modbr{filter:alpha(opacity=80)-moz-opacity:0.8width:auto !importantwidth:100%}

注:

代码应用的式CSS中的Alpha滤镜,这个滤镜可以设置目标元素的透明度。还可以通过指定坐标,从而实现各种不同范围的透明度。具体语法如下:

{filter:alpha(opacity=#opacity,finishopacity=#finishopacity,

style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}

具体参数含义如下:

“opacity”表示透明度调节,范围在0-100,0表示完全透明,100表示完全不透明。

“finishopacity” 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。

“style” 指定透明区域的形状特征:0 代表统一形状,1 代表线形,2 代表放射状,3 代表矩形

“startx” 渐变透明效果开始处的 X坐标。

“starty” 渐变透明效果开始处的 Y坐标。

“finishx” 渐变透明效果结束处的 X坐标。

“finishy” 渐变透明效果结束处的 Y坐标。

以上的参数可以选用,可以只设置一个opacity

如果设置成下面代码,就表示背景式半透明的:

{filter:alpha(opacity=50)}