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

发布于 2024-08-31 06:53:21 字数 155 浏览 3 评论 0原文

无论显示器尺寸如何,我的图像都会拉伸到整个背景。

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

因此它使图像看起来模糊。如果我将其应用于图像,那么当屏幕分辨率改变大小时,模糊的大小也会改变。

任何帮助都会很棒。

干杯

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

七分※倦醒 2024-09-07 06:53:22

您绝对可以定位宽度为 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.

昵称有卵用 2024-09-07 06:53:22

粗略地看了一下,我发现没有 CSS3 的东西可以解决这个问题。这肯定不是真的吗?有人吗?

对于 Internet Explorer,有专有的模糊过滤器。来自 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>    

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:

<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>    
塔塔猫 2024-09-07 06:53:21

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

Are you looking for something like this http://css-tricks.com/blurry-background-effect/

笑看君怀她人 2024-09-07 06:53:21

我不认为有这样的事情。尤其是如果跨浏览器也意味着 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... :)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文