Question

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

但是，它不起作用！

Answer 1

您要做的是不可能。由于SVG过滤器会立即应用于整个元素，因此您不能然后选择性地＆＃34;撤消＆＃34;单个子元素的过滤器。

我建议的只是模糊你想要模糊的元素，然后你可以在顶部没有模糊效果的另一个元素上使用绝对定位。

这是一个现实的例子来说明我在谈论的内容：

＆＃13;

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

＆＃13;

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

＆＃13;

模糊效果整个网站，但一个whild元素

1 个答案: