Наложение текста поверх моего наложения - PullRequest
Новая
       8

Наложение текста поверх моего наложения

0 голосов
/ 18 мая 2018

У меня проблема с оверлеем.Я хотел бы показать текст, если мой оверлей включен.Если пользователь нажимает, то оверлей должен исчезнуть, и должно быть видно содержимое тела.

Но как я могу сделать текст или изображение поверх оверлея? 

<!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>

1 Ответ

0 голосов
/ 18 мая 2018

По сути, вам просто нужно изменить цвет наложенного текста, чтобы сделать его видимым.Но тогда у вас есть проблема, что 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...