模糊整个网站的效果，但一个惠普元素

我已将此.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

模糊整个网站的效果，但一个惠普元素

回答

相关问题