這篇文章主要介紹CSS怎么設置透明度,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
在前端頁面開發布局的時候,為了給用戶呈現不同的效果,經常需要設置透明度,那么css是怎樣設置透明度的?
一、cssrgba()設置顏色透明度
語法:
rgba(R,G,B,A);
RGBA是代表Red(紅色)Green(綠色)Blue(藍色)和Alpha(不透明度)三個單詞的縮寫。RGBA顏色值是RGB顏色值的擴展,帶有一個alpha通道-它規定了對象的不透明度。
rgba()里的值的介紹:
R:紅色值。正整數(0~255)
G:綠色值。正整數(0~255)
B:藍色值。正整數(0~255)
A:透明度。取值0~1之間
rgba()只是單純的可以設置顏色透明度,這樣在頁面的布局中有很多應用。比如說:讓背景出現透明效果,但上面的文字不透明。
二、cssopacity屬性設置背景透明度
語法:
opacity:value;
value:指定不透明度,從0.0(完全透明)到1.0(完全不透明)。
opacity屬性具有繼承性,會使容器中的所有元素都具有透明度;
代碼實例:
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>opacity屬性</title> <style> .demo{ width:280px; height:140px; margin:50pxauto; } .demo1,.demo2{ width:120px; height:120px; margin:10px; float:left; background:#2DC4CB;
總之,rgba()方法與opacity方法雖然都可以實現透明度效果,但rgba()只作用于元素的顏色或其背景色(設置了rgb()透明度元素的子元素不會繼承其透明效果);而opacity具有繼承性,既作用于元素本身,也會使元素內的所有子元素具有透明度。
以上是“CSS怎么設置透明度”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。