Question

我正在尝试模糊背景页面并弹出一个不模糊的加载框。我认为blur(0px)会消除加载div上的模糊。但是，弹出框也仍然模糊不清。

如何仅删除特定元素的模糊？

    <script>    
      document.getElementById("blurme").setAttribute("style","-webkit-filter: blur(3px)"); 
      document.getElementById("loading").setAttribute("style","-webkit-filter: blur(0px)");
    </script>

    <html>
      <body id="blurme">
            <h1>Welcome to My Website</h1>

            <div id="loading">
                  Please wait
            </div>
      </body>
    </html>

这是CSS加载框

#loading
    {
        background:#808080 url(loading.gif) no-repeat center center;
        background-size:220px 50px;
        height: 270px;
        width: 75px;
        position: fixed;
        left: 50%;
        top: 50%;
        margin: -175px 0 0 -275px;
        z-index: 1000;
        border-radius: 15px;
        display:none;

    }

Answer 1

这应解决问题。

  <body>
        <div id="blurme">
            <h1>Welcome to My Website</h1>
        </div>

        <div id="loading">
              Please wait
        </div>
  </body>

Answer 2

这是一个继承问题。通过将blurme id移动到另一个div，加载div不再是blurme对象的子节点：CSS中的第一个字母是cascading。

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>

        <style>
        #loading

            {
                background:#808080 url(loading.gif) no-repeat center center;
                background-size:220px 50px;
                height: 270px;
                width: 75px;
                position: fixed;
                left: 50%;
                top: 50%;
                margin: -175px 0 0 -275px;
                z-index: 1000;
                border-radius: 15px;

            }

        </style>


    </head>

        <body>

            <div id="blurme">
                <h1>Welcome to My Website</h1>
            </div>

            <div id="loading">
                    Please wait
            </div>

            <script>    
                document.getElementById("blurme").setAttribute("style","-webkit-filter: blur(3px)"); 
                document.getElementById("loading").setAttribute("style","-webkit-filter: blur(0px)");
            </script>

        </body>

</html>

Javascript / CSS webkit过滤器 - 删除特定元素上的模糊

2 个答案: