css文字不透明度怎么设置？

时间：2020-05-10 17:29:56 阅读：107 评论：0 收藏：0 [点我收藏+]

在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具有继承性，既作用于元素本身，也会使元素内的所有子元素具有透明度。