带有JavaScript跨浏览器的Webkit背景过滤器 [英] Webkit Backdrop Filter with JavaScript cross-browser
本文介绍了带有JavaScript跨浏览器的Webkit背景过滤器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经看到了新版的惊人演示
I have seen this amazing demo of the new
-webkit-backdrop-filter: blur(Xpx);
我想问一下如何使用至少在Chrome浏览器中有效但在Firefox中也适用的JavaScript来重现这一点吗?
and I would like to ask how to reproduce this with JavaScript that at least works in Chrome but possibly in Firefox too?
演示: https://webkit.org/demos/backdrop-filter/
推荐答案
您可以尝试svg过滤器:
You could try svg filters:
http://codepen.io/MakiBM/pen/YGEgQK?editors=1000
<svg x="0px" y="0px" width="500px" height="500px" viewbox="0 0 500 500">
<defs>
<filter id="blur" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpaceOnUse">
<feGaussianBlur x="50" y="50" width="400" height="400" stdDeviation="10" in="SourceGraphic" result="blurImg"/>
<feComponentTransfer in="blurImg" result="opaqueBlur">
<feFuncA type="linear" intercept="1"/>
</feComponentTransfer>
<feBlend mode="normal" in="opaqueBlur" in2="SourceGraphic"/>
</filter>
</defs>
<image filter="url(#blur)" x="10" y="10" id="svg-image" width="100%" height="100%" xlink:href="https://www.nycgovparks.org/photo_gallery/full_size/14413.jpg" />
<rect x="50" y="50" height="400" width="400" fill="rgb(255,255,255)" fill-opacity="0.2" />
</svg>
我还没有进行跨浏览器检查,但是支持范围很广: http://caniuse.com/svg-filters
I haven't go round with crossbrowser check but support is very wide: http://caniuse.com/svg-filters
这篇关于带有JavaScript跨浏览器的Webkit背景过滤器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文