模糊整個網站的效果，但一個惠普元素

我已將此.blur類添加到body標記以模糊整個網站。模糊整個網站的效果，但一個惠普元素

CSS

.blur { 
    filter: blur(1px); 
    filter: url("blur.svg#gaussian_blur"); 
    -webkit-filter: blur(1px); 
    -o-filter: blur(2px); 
}

HTML

<body class="blur"> 
... 
<div class="mustBeClear"></div> <!-- somewhere in the page--> 
... 
</body>

如何保持.mustBeClear類不是所迷離。

我已經試過

.mustBeClear{ 
    filter: none; 
    -webkit-filter: none; 
    -o-filter: none; 
}

但是，這是行不通的！

來源

2015-09-25 Ghilas BELHADJ

您使用的WebKit的？ – Tim

希望在所有瀏覽器上都具有相同的效果，所以是的。 –

你正在做的是不可能。由於SVG過濾器一次應用於整個元素，因此不能然後選擇性地「撤消」單個子元素的過濾器。

我會推薦的僅僅是模糊您想要模糊的元素，然後您可以對頂部沒有模糊效果的另一個元素使用絕對定位。

這是一個活生生的例子來說明什麼我談論：

.container { 
 
    position: relative; 
 
    top: 50px; 
 
    left: 50px; 
 
} 
 

 
.blur { 
 
    filter: blur(5px); 
 
    -webkit-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
} 
 

 
#text { 
 
    position: absolute; 
 
    left: 50px; 
 
    top: 50px; 
 
}

<div id="container"> 
 
    <div class="blur"> 
 
<img src="http://i.imgur.com/5LGqY2p.jpg?1" /> 
 
    </div> 
 
    <div id="text">Not Blurred Text</div> 
 
</div>

來源

2015-09-25 18:38:57

模糊整個網站的效果，但一個惠普元素

回答

相關問題