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

前端之家收集整理的这篇文章主要介绍了如何应用透明度而不影响html/css的子元素?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想使用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 – 与上述几乎相同,但位置和大小不必被硬编码。

原文链接:https://www.f2er.com/html/233007.html

猜你在找的HTML相关文章