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

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

javascript jquery html css

Javascript/CSS webkit过滤器-删除特定元素上的模糊,javascript,jquery,html,css,webkit,Javascript,Jquery,Html,Css,Webkit,我试图模糊背景页面，弹出一个没有模糊的加载框。我认为blur（0px）会删除加载div上的模糊。但是，弹出框也会保持模糊如何仅移除特定元素的模糊 <script> document.getElementById("blurme").setAttribute("style","-webkit-filter: blur(3px)"); document.getElementById("loading").setAttribute("style"

我试图模糊背景页面，弹出一个没有模糊的加载框。我认为

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>

这应该可以解决问题


欢迎来到我的网站
请稍等

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


#装载
{
背景：#808080 url（loading.gif）无重复中心；
背景尺寸：220px 50px；
高度：270px；
宽度：75px；
位置：固定；
左：50%；
最高：50%；
利润：-175px0-275px；
z指数：1000；
边界半径：15px；
}
欢迎来到我的网站
请稍等
document.getElementById（“blurme”）.setAttribute（“样式”，“webkit过滤器：blur（3px）”）；
document.getElementById（“加载”）.setAttribute（“样式”，“webkit过滤器：模糊（0px）”）；

#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;

    }

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