对背景图像应用部分高斯模糊答案

【问题标题】：Applying a partial gaussian like blur to a background image对背景图像应用部分高斯模糊
【发布时间】：2011-02-15 15:06:16
【问题描述】：

无论显示器尺寸如何，我都有一张图像被拉伸到其完整背景。

我需要做的是在此图像上方仅在左侧的一部分上应用跨浏览器模糊。

因此它会在图像上呈现模糊的外观。如果我将它应用于图像，那么当屏幕分辨率改变大小时，模糊的大小也会改变。

任何帮助都会很棒。

干杯

【问题讨论】：

在 CSS 中还是在图像的服务器端？我假设是前者？
Css 会很棒，尽管在这个阶段我会做任何事情。通过在任何背景图像的左侧创建模糊（比如 250 像素宽），我可以在其上方放置一个菜单。就是这个想法。
我明白了...如果需要调整大小，那么 CSS 将是您唯一的选择。绝对没有一个跨浏览器的方法可以做到这一点，但如果CSS3在那个部门没有提供什么，我会感到惊讶。

标签： php javascript jquery image png

【解决方案1】：

我不认为有这样的事情。如果跨浏览器也意味着 IE6，则尤其如此。

但是，您可以做的是创建图像的模糊版本而不是模糊版本，并仅在您想要的位置（裁剪）显示模糊版本。如果你知道我的意思... :)

【讨论】：

不为ie6所困扰，只为ie7,8等
@Jongsma @Andy 有趣的是，在这种情况下，IE 从 5.5 开始就具有执行此操作的功能，而 FF3.6、Opera 和 Chrome 则没有 - 至少据我所知：)跨度>
嗯我明白你的意思，这通常不是一个坏主意，但同样因为图像在背景上被拉伸，上面的图像会镜像它。它看起来很奇怪。但好主意！感谢您的意见。
我之前注意到了那些模糊过滤器，但它不是跨浏览器......这个有点挑逗。有一次，看起来 IE 可能会胜出……肯定不是吗？ :)

【解决方案2】：

您绝对可以定位一个宽度为 50%、高度为 100% 的 div。然后将 div 的背景设置为大约 50% 透明的白色背景。这可能会奏效。

【讨论】：

虽然不是真正的模糊。

【解决方案3】：

粗略的一瞥告诉我没有 CSS3 的东西。这肯定不是真的吗？有人吗？

对于 Internet Explorer，有专有的 blur filter。来自 MSDN 网站的示例：

<DIV STYLE="width:100%; filter:
    progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2)
    progid:DXImageTransform.Microsoft.Wheel(duration=3);">
Blurry text with smudge of gray.</div>

【讨论】：

【解决方案4】：

您是否正在寻找类似的东西http://css-tricks.com/blurry-background-effect/

【讨论】：

看起来唯一的办法就是加载两张图片。
这仍然很糟糕，因为我将其应用于此效果：css-tricks.com/perfect-full-page-background-image