我想创建一个不透明度模糊叠加层,类似于Windows Aero或iOS7。不幸的是,filter: blur()
或filter: url(#svgBlur)
属性只能应用于元素,而不是它背后的内容。
为了解决这个问题,我们需要一份模糊的背景副本。这可以使用background: -moz-element(#elementId)
实验性CSS属性在FX中实现。使用它我可以在FX only中获得我想要的效果。
有other questions解决模糊问题,而one solution似乎是html2Canvas插件的使用。
然而,这是重新创建整个模糊内容,包括手动重新创建的样式等。这是非常令人印象深刻的工作,但对于这种效果来说,似乎是大规模的过度杀伤(无论是性能还是尺寸)。
我想要做的是为-moz-element
创建某种垫片。它看起来像should be possible using an SVG foreignObject
,但如果您的HTML不是有效的XML,则会出现安全问题并失败。
有没有办法模仿-moz-element
(使用canvas,SVG或其他东西),我不需要解析/重绘整个重叠区域?
答案 0 :(得分:2)
支持BackgroundImage伪输入的浏览器允许您过滤元素后面的内容。 Opera 12也支持这个以及其他一些UAs。
我认为Opera 12也支持具有external foreignObject的SVG 1.2 Tiny功能,即
<foreignObject xlink:href="external file url"/>
您可以将它与backgroundImage结合使用,即使html内容不是有效的XML,也可以将html内容作为背景。
你的milage可能与其他UA不同,正如你所说Firefox有不同的解决方案。
答案 1 :(得分:0)
您可以查看我最近制作的名为AeroJS的插件。它完全符合您的要求并支持除IE之外的所有内容。
编辑:我很抱歉不包括插件的描述。
基本上,AeroJS的工作方式是获取指定元素(backgroundElement)的HTML,指定元素(backgroundImage)的背景图像,并将它们添加到指定元素之前。然后,使用WebKit的模糊滤镜,将指定量的模糊(blurAmount)应用于背景中的元素。它仍处于开发的早期阶段,因此预计存在漏洞。使用AeroJS的一个缺点是它几乎完全是静态的。您可以在元素周围移动,并且后面的每个元素都会模糊,但是原始DOM中发生的任何更改都不会反映在模糊/复制的HTML中。为此需要自定义代码。
答案 2 :(得分:-5)
如果这些属性仅适用于所选元素,为什么不全部选择它们?
可能与:
#myElementID *