一个对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 +