如何应用透明度而不影响html/css的子元素？

发布时间：2020-12-14 21:37:55 所属栏目：资源来源：网络整理

导读：我想使用html和css来实现这一点：我试图将容器的不透明度设置为0.3，将框设置为1，但不起作用：两个div都有0.3个不透明度。 jsFiddle of my try here 我试图获得的效果是页面顶部的弹出框。通过淡化下面的内容(通过降低不透明度)来突出显示。解决方法据我

我想使用html和css来实现这一点：

我试图将容器的不透明度设置为0.3，将框设置为1，但不起作用：两个div都有0.3个不透明度。

jsFiddle of my try here

我试图获得的效果是页面顶部的弹出框。通过淡化下面的内容(通过降低不透明度)来突出显示。

解决方法

据我所知，你不能以简单的方式做到这一点。这里有几个选择：
1.使用绝对定位将盒子的“内部”放置在容器中。

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            #container {
                opacity: 0.3;
                background-color: #777788;
                position: absolute;
                top: 100px;
                left: 100px;
                height: 150px;
                width: 300px;
            }
            #box {
                opacity: 1;
                background-color: #ffffff;
                position: absolute;
                top: 110px;
                left: 110px;
                height: 130px;
                width: 270px;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <div id="box">
            <p>Something in here</p>
        </div>
    </body>
</html>

>使用Javascript – 与上述几乎相同，但位置和大小不必被硬编码。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!