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

我试图模糊背景页面并弹出一个未模糊的加载框。我会认为blur(0px)会删除加载div上的模糊。但是，弹出框也保持模糊。Javascript/CSS webkit过滤器 - 删除特定元素上的模糊

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

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

    }

来源

2013-11-24 Mark Kennedy

这是一个继承问题。通过将blurme id移动到另一个div，加载div不再是模糊对象的子节点：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>

来源

2013-11-24 23:26:37

这应该可以解决这个问题。

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

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

来源

2013-11-24 23:12:43

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

回答

相关问题