在背景图像上应用部分高斯模糊

无论监视器的大小如何，我都拥有图像并将图像拉伸到背景的整个背景。在背景图像上应用部分高斯模糊

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

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

任何帮助将是伟大的。

干杯

来源

2010-05-04 Andy

在CSS或图像中的服务器端：从MSDN网站的例子吗？我假设前者？ – 2010-05-04 19:09:53

Css会很棒，虽然在这个阶段我会除了任何东西。通过在任何背景图像的左侧部分创建模糊（比如说250px宽），它可以让我在上面放置一个菜单。那是这个想法。 – Andy 2010-05-04 19:13:08

我明白了......如果需要调整大小，CSS将是您唯一的选择。绝对没有*一种*跨浏览器的方式来做到这一点，但如果CSS3在该部门没有提供的东西，我会感到惊讶。 – 2010-05-04 19:15:01

您正在寻找这样的事情http://css-tricks.com/blurry-background-effect/

来源

2010-05-04 19:19:33 Mark

只是看着这个现在，看起来很有趣... – Andy 2010-05-04 19:25:08

看起来像这样做的唯一方法是加载两个图像。 – Andy 2010-05-04 19:28:07

这仍然是一个无赖，因为即时通讯应用于此效果： http://css-tricks.com/perfect-full-page-background-image/ – Andy 2010-05-04 19:33:26

我不认为有这样的事情。特别是如果跨浏览器也意味着IE6。

然而，你可以做的是创建一个模糊和不模糊的图像版本，并显示模糊版本只有你想要它（裁剪）。如果你知道我的意思...... :)

来源

2010-05-04 19:17:06

不会被ie6，ie7,8和其他人困扰 – Andy 2010-05-04 19:17:48

@Jongsma @Andy有趣的是，在这种情况下，IE有5.5的功能，而FF3.6，Opera和Chrome没有 - 我不知道至少:) – 2010-05-04 19:18:28

嗯，我明白你的意思，通常不会是一个坏主意，但再次因为图像被拉伸到背景上面的图像将镜像它。这看起来很奇怪。但好主意！感谢您的意见。 – Andy 2010-05-04 19:19:09

你可以绝对定位一个具有50％宽度和100％高度的div。然后制作了50％透明白色背景的div背景。这可能会诀窍。

来源

2010-05-04 19:17:38 codedude

虽然这不是真正的模糊。 – 2010-05-04 19:19:32

这也将苍白的形象...不错的想法，但是... – Andy 2010-05-04 19:22:43

粗略的一瞥告诉我这里没有CSS3的东西。当然这不可能是真的？任何人？

对于Internet Explorer，有专有的blur filter。

<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>

来源

2010-05-04 19:17:45

在背景图像上应用部分高斯模糊

回答

相关问题