CSS实现背景透明，文字不透明

最新推荐文章于 2022-09-30 16:46:37 发布

Sail_Again

最新推荐文章于 2022-09-30 16:46:37 发布

阅读量538

点赞数 1

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/u013575984/article/details/78054915

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

平时我们实现透明的css方法通常有以下3种方式：

css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8
css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.8)
IE专属滤镜 filter:Alpha(opacity=x)，x 的取值从 0 到 100，如filter:Alpha(opacity=80)

使用opacity:x时会出现设置opacity元素的所有后代元素会随着一起具有透明性，所以一般用于调整图片或者模块的整体不透明度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>opacity</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            padding: 50px;
            width: 300px;
            background:red;
        }
        .demo{
            padding: 25px;
            width: 200px;
            text-align: center;
            background-color:#000000;
            opacity: 0.2;
        }
        .demo p{
            color: #FFFFFF;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="demo">
        <p>背景透明，文字也透明</p>
    </div>
</div>
</body>
</html>

结果如下：
这里写图片描述

所以使用opacity实现背景透明，文字不透明的需求是不行的。

rgba(red, green, blue, alpha)一般用于设置颜色的不透明度，用来调整background-color、color、box-shadow等的不透明度

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>opacity</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            padding: 50px;
            width: 300px;
            background:red;
        }
        .demo{
            padding: 25px;
            width: 200px;
            text-align: center;
            background-color:#000000;
            background-color:rgba(0,0,0,0.2);
        }
        .demo p{
            color: #FFFFFF;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="demo">
        <p>背景透明，文字不透明</p>
    </div>
</div>
</body>
</html>