一个对CSS3透明度属性的使用教程

一个对CSS3透明度属性的使用教程
本文主要介绍了CSS3教程的不透明性质,主要用于设置透明的效果,需要的朋友可以参考下
亮度和透明度

Grammar:

R:红色值。正整数|百分比

G:绿色价值。正整数|百分比

B:蓝色值。正整数|百分比

答:透明度。值在0到1之间。

CSS代码将内容复制到剪贴板。
IE6 8 / * * /
滤镜:alpha(不透明度= 80);
其他
不透明性:0.8;

RGBA比元素设置CSS透明度好,因为单独的颜色不影响整个元件的透明度,也不会影响其他元素的属性,如边框和字体,它并不会影响其他元素的透明度。

不透明性的使用

不透明度的声明是用来设置一个元素的透明度:保护层,文字,图片,等一个不透明度的值为1是完全不透明的,否则,该值为0,这是完全透明的,看不见的。1和0之间的任何值,表示该元素的透明度。

浏览器的兼容性

透明度是最好的浏览器支持CSS3元素hellip;当然,除了IE!
CSS3透明度(例如1层)
上面的透明示例使用以下样式:

CSS代码将内容复制到剪贴板。
div.opacityl1 {背景:# 036;不透明度:0.2;宽度:575px;高度:20px;}
div.opacityl2 {背景:# 036;不透明度:0.4;宽度:575px;高度:20px;}
div.opacityl3 {背景:# 036;不透明度:0.6;宽度:575px;高度:20px;}
div.opacityl4 {背景:# 036;不透明度:0.8;宽度:575px;高度:20px;}
div.opacityl5 {背景:# 036;不透明度:1;宽度:575px;高度:20px;}

浏览器支持:

Firefox 3.05 +
眉目传情Chrome 1 +
IE浏览器8—
Opera 9.6 +
safari 3.2.1 +

CSS 3透明度(示例2:图片)
我们也可以像上面的例子一样使用透明的透明效果,一个很酷的应用是将不透明度应用到:悬停,通过效果实现一个链接的鼠标。

CSS代码将内容复制到剪贴板。
img.opacity1 {不透明度:0.25;宽度:150px;身高:100px;}
img.opacity2 {不透明度:0.50;宽度:150px;身高:100px;}
img.opacity3 {不透明度:0.75;宽度:150px;身高:100px;}

浏览器支持:

Firefox 3.05 +
铬1.0.154 +抛媚眼
IE浏览器IE8—
Opera 9.6 +
safari 3.2.1 +

tag:透明度使用教程属性电脑软件

相关内容