我想创建一个 div 固定在一个位置并使其半透明 - 使其后面的内容部分可见和模糊.我正在寻找的样式类似于 .Firefox 似乎在 v35+ 中获得了该功能,而即使 IE11 似乎也没有任何兼容性.
SVG另一种方法是使用 svg(对于 IE9 及更高版本基本安全):
filter: url(blur.svg#blur);SVG:
<过滤器 id="模糊"><feGaussianBlur stdDeviation="3"/></过滤器></svg>jsFiddle 演示
Javascript您将获得与 javascript 的最高浏览器兼容性,但通常是最慢的性能并增加您的 js 的复杂性.
- www.blurjs/(jquery 插件,canvas 解决方案,因此 IE9+、FF、Chrome 支持)
- nbartlomiej.github.io/foggy/(jquery插件IE8+,FF,Chrome 支持)
I'd like to create a div that is fixed in one position and make it translucent - making the contents behind it partially visible and blurred. The style I'm looking for is similar to the div of the 'See All' thumbnails in the Apple website.
The only thing I can do is adjust opacity: 0.9 but I cannot blur the contents that go under the div.
Note: The div has a fixed position and the background scrolls. The background that scolls is a mix of text and photos.
解决方案CSS
CSS 3 has a blur filter (only webkit at the moment Nov 2014):
-webkit-filter: blur(3px); /*chrome (android), safari (ios), opera*/IE 4-9 supports a non-standard filter
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3')See some nice demo for the blur and other filters here.
For future reference here is the compatibility table for CSS filter. Firefox seems to be getting the feature in v35+ while even IE11 does not seem to have any compatibility.
SVGAn alternative is using svg (safe for basically IE9 and up):
filter: url(blur.svg#blur);SVG:
<svg version="1.1" xmlns="www.w3/2000/svg"> <filter id="blur"> <feGaussianBlur stdDeviation="3" /> </filter> </svg>jsFiddle Demo
JavascriptYou will achieve the highest browser compatibility with javascript, but usually the slowest performance and added complexity to your js.
- www.blurjs/ (jquery plugin, canvas solution so IE9+, FF, Chrome support)
- nbartlomiej.github.io/foggy/ (jquery plugin IE8+, FF,Chrome support)
更多推荐
如何使用 CSS 创建磨砂玻璃效果?
发布评论