Question

我有重叠问题。如果我的叠加层打开，我想显示一个文本。如果用户点击，那么叠加应该会消失并且应该看到正文内容。

但是如何在叠加层上制作文字或图片？

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            #overlay {
                position: fixed;
                display: none;
                -webkit-filter:blur(4px);
                filter:blur(4px);
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background:rgba(255,255,255, 0.9);
                z-index: 2;
                cursor: pointer;
            }

            #text{
                position: absolute;
                top: 50%;
                left: 50%;
                font-size: 50px;
                color: white;
                transform: translate(-50%,-50%);
                -ms-transform: translate(-50%,-50%);
            }
        </style>
    </head>
    <body>

        <div id="overlay" onclick="off()">
            <div id="text">Overlay Text</div>
        </div>

        <body onload="on()">

sguhdulfghldusfhgsdufg

        </body>


        <script>
            function on() {
                document.getElementById("overlay").style.display = "block";
            }

            function off() {
                document.getElementById("overlay").style.display = "none";
            }
        </script>

    </body>
</html>

Answer 1

基本上，您只需更改叠加文字的颜色即可使其可见。但是，您遇到的问题是blur也将适用于您的子元素，并且文本不可读。

为了使其工作，您需要创建一个包含blur的子元素，以确保它不适用于叠加文本。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            #overlay {
                position: fixed;
                display: none;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background:rgba(255,255,255, 0.9);
                z-index: 2;
                cursor: pointer;
            }
            
            #blur {
                width: 100%;
                height: 100%;
                -webkit-filter:blur(4px);
                filter:blur(4px);
            }

            #text{
                position: absolute;
                top: 50%;
                left: 50%;
                font-size: 50px;
                transform: translate(-50%,-50%);
                -ms-transform: translate(-50%,-50%);
            }
        </style>
    </head>
    <body>

        <div id="overlay" onclick="off()">
            <div id="background"></div>
            <div id="text">Overlay Text</div>
        </div>

        <body onload="on()">

sguhdulfghldusfhgsdufg

        </body>


        <script>
            function on() {
                document.getElementById("overlay").style.display = "block";
            }

            function off() {
                document.getElementById("overlay").style.display = "none";
            }
        </script>

    </body>
</html>

在我的叠加层上叠加文字

1 个答案: