【Web前端实操03】利用两种方式实现一个 div 盒子半透明

墨倾许

已于 2024-01-24 11:36:21 修改

阅读量839

点赞数 13

分类专栏： Web前端实操文章标签：前端 css html

于 2024-01-15 20:21:52 首次发布

本文链接：https://blog.csdn.net/qq_45498824/article/details/135610056

版权

Web前端实操专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文介绍了使用CSS实现div盒子半透明的两种方法：一是通过设置`opacity`属性，二是利用`rgba`颜色模式，后者允许更精确地控制颜色和透明度。

摘要由CSDN通过智能技术生成

通过CSS，想要实现一个div盒子半透明的效果，有两种方法，一种是通过透明属性来完成，还有一种是通过rgba最后一个属性是设置透明度的方法来搞定。用了两个盒子直接来实现两种方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 300px;
            height: 200px;
            background: red;
            /* 背景颜色的透明度，半透明设置为0.5 */
            opacity: 0.5;
        }
        .two{
            width: 300px;
            height: 200px;
            /* 颜色的最后一个属性是透明度设置 */
            background:rgba(0, 0, 0,0.5) ;
        }
    </style>
</head>
<body>
    <!-- 第一种：透明属性 -->
    <div class="one">
        我只是一个平平无奇的盒子罢了
    </div>
    <!-- 第二种：利用rgba颜色进行改变 -->
    <div class="two">
        我只是一个平平无奇的盒子罢了
    </div>
</body>
</html>

代码实现效果：