对背景图像应用部分高斯模糊
无论显示器尺寸如何,我的图像都会拉伸到整个背景。
我需要做的是仅在左侧的一部分上应用该图像上方的跨浏览器模糊。
因此它使图像看起来模糊。如果我将其应用于图像,那么当屏幕分辨率改变大小时,模糊的大小也会改变。
任何帮助都会很棒。
干杯
I have and image which gets stretched to its full background, regardless of the monitor size.
What i need to do is apply cross-browser blur above this image on only a portion of the left hand side.
So it gives the appearance of a blur on the image. If i apply it to the image then when the screen resolution changes size so does the size of the blur.
Any help would be great.
Cheers
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
您绝对可以定位宽度为 50%、高度为 100% 的 div。然后将div的背景做成大约50%透明的白色背景。这可能会起作用。
You could absolutely position a div that has a 50% width and a 100% height. Then made the background of the div about a 50% transparent white background. This might do the trick.
粗略地看了一下,我发现没有 CSS3 的东西可以解决这个问题。这肯定不是真的吗?有人吗?
对于 Internet Explorer,有专有的模糊过滤器。来自 MSDN 站点的示例:
A cursory glance tells me there is no CSS3 thingy for this. Surely this can't be true? Anybody?
For Internet Explorer, there is the proprietary blur filter. Example from the MSDN site:
您是否正在寻找类似的东西 http://css-tricks.com/blurry-background-效果/
Are you looking for something like this http://css-tricks.com/blurry-background-effect/
我不认为有这样的事情。尤其是如果跨浏览器也意味着 IE6。
但是,您可以做的是创建图像的模糊和不模糊版本,并仅在您想要的位置(裁剪)显示模糊版本。如果你明白我的意思... :)
I don't think there is something like that. Especially not if cross browser also means IE6.
What you could do, however, is create a blurred and not blurred version of the image and show the blurred version only where you want it (cropped). If you know what I mean... :)