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