5

我正在尝试将高斯模糊应用于具有一些包含某些内容的子节点的元素。

对于 Chrome，我采用了应用样式：

    -webkit-filter: blur(2px);

火狐不支持这个。Firefox 支持的是将 SVG 应用于元素。知道这一点后，我在 google 上搜索了一个示例，他们将解释如何使用 SVG 将高斯模糊应用于元素。我在这个演示中找到了这个例子。

我酝酿了以下CSS：

    #div-with-content{
        -webkit-filter: blur(2px);
        filter: url('#blur');
    }

并将其放入相应的HTML文件中：

    <svg:svg>
        <svg:filter id="blur">
            <svg:feGaussianBlur stdDeviation="2"/>
        </svg:filter>
    </svg:svg>

但是当我去测试页面时，我看到那个页面div-with-content已经不存在了。它已经消失了。每次我从中删除模糊样式时，div-with-content它都会再次出现。

谁能帮我解决这个问题，我真的在我的知识范围内尝试了一切。

4

5 回答 5

3

我不知道是你的撇号还是你的 svg: 但这个版本在 Firefox 中完美运行：

CSS:
#div-with-content{
        filter: url("#blur");
    }


HTML:
<svg>
   <filter id="blur">
       <feGaussianBlur stdDeviation="2"/>
   </filter>
</svg>

<div id="div-with-content"> WOohooo</div>
于 2013-02-20T23:23:16.530 回答
2

如果只有你想模糊的文字，有这个小技巧

p{
   color: transparent;
   text-shadow: 0 0 4px #222;
}

你可以在这里看到它是如何工作的 jsFiddle

于 2013-02-20T16:29:19.383 回答
0

编辑

您可以从外部文档加载，只要“该文档来自与其应用的 HTML 文档相同的来源”。

确保在 URL 参数中传递了具有 svg 效果的 html 页面以及 svg 效果的 ID（例如，

所以，而不是

url('#filter-effect')

做

filter: url('index.html#filter-effect')

在我阅读@RobertLongon 的评论之前，这对我来说并不明显，但现在它是有道理的。您可以将所有 SVG 放在一个文档中，并从其他 html 文件中引用它们。

-

老答案：

Mozilla 开发者网络 说：

您可以在同一文档中或在外部样式表中指定 SVG 样式。

......但他们充满了它。错误报告？

使用<style>而不是<link>

由于我无法理解的原因，如果您.blur在 html 文档之外声明该类， via <link>，您的元素将消失，同时仍占用空间。这就是为什么小提琴在其他答案中工作但实施不是的原因。JSFiddle 使用<style>. 为了避免这种行为，您应该改为.blur在文档中声明类，也就是<style>...</style>

也很重要：

注意：命名空间在 HTML5 中无效，请不要在 HTML 格式文档的标签中使用“svg:”。

再次，<style>，不是<link>。

来源：
反复试验
mdn：将 SVG 效果应用于 HTML 内容

于 2015-01-03T11:32:12.267 回答
0

我在尝试使用的过滤器上看到了相同的行为。事实证明，我还将过滤器定义的 SVG 设置为display: none;. 一旦我删除它，过滤器就可用并且它们应用的 HTML 元素正确显示。

于 2019-02-13T16:37:17.593 回答
-2

这可能已经晚了 2 年，但是调用文档的名称并没有为我做这件事，但是像这样将样式直接放在元素上效果很好：

<div class="imageblur" style="filter:url(#blur) ">
于 2015-05-14T10:02:39.770 回答