【精】CSS透明度汇总_网站前端开发_前端开发者

网站前端开发_前端开发者css

https://www.rokub.com

1,使用javascript</b><br><blockquote>document.getElementById(“myElement”).style.opacity = “.4”;

//针对所有浏览器<br>document.getElementById(“myElement”).style.filter = “alpha(opacity=40)”;// 针对IE<br></blockquote><b>

2,使用jquery设置和改变css透明度</b><br><blockquote>$(“#myElement”).css({ opacity: .4 });

// 所有浏览器有效<br>您也可以使用一下jquery代码使一个元素动画透明:<br>$(“#myElement”).animate({<br>opacity: .4<br>}, 1000, function() {<br>// 动画完成,所有浏览器下有效<br>});

<br></blockquote><b>

3,通过 RGBA的透明度</b><br><blockquote>CSS3技术只支持部分新的浏览器(Firefox 3+, Opera 10.1+, Chrome 2+,Safari 3.1+),可通过RGBA的alpha通道的方式设定。语法如下:<br><blockquote>#rgba {<br>background: rgba(98, 135, 167, .4);<br>}<br>

</blockquote></blockquote>在上面的定义中,通过RGB(前三个数字)给背景设定颜色,然后最后一个是alpha设置,以执行给定颜色的透明度。这个alpha设置跟opacity 属性一样,可设定任何0到1的数字,精确得到两位小数点。数字值越大,就越接近完全不透明的颜色。<br><b>4,通过 HSLA的透明度</b><br><blockquote>类似之前的定义,CSS3还允许使用HSLA单独设置颜色和alpha值,HSLA表示Hue(色调), Saturation(饱和度), Lightness(亮度), 和Alpha。

以下是HSLA透明的例子:<br><blockquote>#hsla {<br>background: hsla(207, 38%, 47%, .4);<br>}<br></blockquote></blockquote><b>

5,最常用的</b><br>filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;<br><font color=”#F00000″>注意 </font>RGBA和HSLA透明度的一个重要的好处是这些透明度设置不会影响到子元素的,但通过opacity属性的方式则会。alpha设置的RGBA和HSLA只影响背景颜色的透明度.

 

网站前端开发_前端开发者css

https://www.rokub.com

» 本文来自:前端开发者 » 《【精】CSS透明度汇总_网站前端开发_前端开发者》
» 本文链接地址:https://www.rokub.com/10445.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!