我正在尝试将高斯模糊应用于具有一些包含某些内容的子节点的元素.
对于Chrome我在应用风格中做了：
@H_404_4@-webkit-filter: blur(2px);Firefox不支持此功能. firefox支持的是applying SVG to elements.知道了这一点我搜索谷歌的例子,他们将解释如何使用SVG将高斯模糊应用于元素.我在this demo找到了this example.
我酿造了以下CSS：
@H_404_4@#div-with-content{ -webkit-filter: blur(2px); filter: url('#blur'); }并将其放入相应的HTML文件中：
@H_404_4@<svg:svg> <svg:filter id="blur"> <svg:feGaussianBlur stdDeviation="2"/> </svg:filter> </svg:svg>但是当我去测试页面的时候,我看到div-with-content不再存在了.它已经消失了.每次我从div-with-content中删除模糊样式时,它再次出现.
任何人都可以帮我解决这个问题,我真的在我的知识范围内尝试了一切.
解决方法
我不知道它是你的撇号还是你的svg：但这个版本在Firefox中完美运行：
@H_404_4@CSS:
#div-with-content{
filter: url("#blur");
}
HTML:
<svg>
<filter id="blur">
<feGaussianBlur stdDeviation="2"/>
</filter>
</svg>
<div id="div-with-content"> WOohooo</div>
