我正在尝试将高斯模糊应用于具有包含某些内容的子节点的元素。
对于 Chrome,我采用应用样式:
-webkit-filter: blur(2px);
Firefox 不支持这个。 firefox 支持的是 applying SVG to elements .知道这一点后,我在谷歌上搜索了一个示例,他们将在其中解释如何使用 SVG 将高斯模糊应用于元素。我找到了 this example与 this demo .
我编写了以下 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
中删除模糊样式时,它都会再次出现。
谁能帮我解决这个问题,我真的已经尝试了我所知道的一切。
最佳答案
我不知道是你的撇号还是你的 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>
关于html - 应用 SVG 高斯模糊后 Div 消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14971288/