css文字不透明度怎么設置?


在css中有很多好看的樣式都可以實現,css設置出來的樣式讓整個網頁看起來也會非常美觀,今天的這篇文章就給大家來介紹一下在css中怎么設置文字的透明度,讓你的文字在網頁中看起來是透明的。

 

 

CSS設置透明度可用如下兩類方法實現:

1、使用rgba
2、使用opacity

使用rgba設置文字不透明度的方法示例:

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .div{ background:red; width:100px; height:100px; color:rgba(255,255,255,0.4) } </style> </head> <body> <div> 我是透明文字 </div> </body> </html>

 

使用opacity設置文字不透明度示例:

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .div{ background:red; width:100px; height:100px; } p{opacity:0.4;} </style> </head> <body> <div> <p>我是透明文字</p> </div> </body> </html>

 

rgba()方法與opacity方法雖然都可以實現透明度效果,但rgba()只作用於元素的顏色或其背景色(設置了rgb()透明度元素的子元素不會繼承其透明效果);而opacity具有繼承性,既作用於元素本身,也會使元素內的所有子元素具有透明度。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM