「加精」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