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過濾器 - 刪除特定元素上的模糊

回答

相關問題