问题描述
我想创建一个固定在一个位置并使其透明的 div
,使其后面的内容部分可见和模糊。我正在寻找的样式类似于。 Firefox似乎获得了v35 +的功能,而即使IE11似乎没有任何兼容性。
SVG
另一种方法是使用svg():
filter:url(blur.svg#blur);
SVG:
code>< svg version =1.1xmlns =http://www.w3.org/2000/svg>
< filter id =blur>
< feGaussianBlur stdDeviation =3/>
< / filter>
< / svg>
Javascript
您将获得与JavaScript最高的浏览器兼容性,但通常是您的js的最慢的性能和增加的复杂性。
- (jquery插件,)
- (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.
SVG
An alternative is using svg (safe for basically IE9 and up):
filter: url(blur.svg#blur);
SVG:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>
Javascript
You will achieve the highest browser compatibility with javascript, but usually the slowest performance and added complexity to your js.
- http://www.blurjs.com/ (jquery plugin, canvas solution so IE9+, FF, Chrome support)
- http://nbartlomiej.github.io/foggy/ (jquery plugin IE8+, FF,Chrome support)
这篇关于如何使用CSS创建磨砂玻璃效果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!