5

假设我的网站在图层方面是这样排列的。

  • 背景图片 ( background-size:cover;)
  • 500 x 500 div，半透明白色背景。
  • div 中的内容。

我想要的是 div 下的区域（在背景图像上）被模糊。我的问题是，对于不同的屏幕尺寸，我不能让背景图像“预先模糊”，因为该 div 并不总是与背景对齐。

所以我的问题是，是否可以通过像我为 div 定义区域来动态模糊背景图像的特定部分？例如position:absolute; top:45% right:0;或者什么是我最好的跨浏览器选项。CSS或其他方面，没关系。

谢谢

在旁注中，我考虑过在背景和前面谈到的 div 之间放置一个 div，其背景图像与它后面的图像相同，但将其背景位置设置为与前景 div 匹配并使其模糊。有点像在 ps 等程序中放大照片，而导航器中的框仅指正在显示的图像的那部分。

4

2 回答 2

1

这对于您尝试做的事情可能有点繁重，但您可以使用Blur.js

$('.target').blurjs({ 
    source: 'body',
    radius: 10, 
});

如果您需要模糊的不仅仅是背景，请查看：
https ://stackoverflow.com/a/17134789/1947286

于 2013-07-06T02:27:21.860 回答
0

您可以将一张图片与另一张图片叠加（使用divs）并模糊叠加。

<div style="position: relative; background: URL(...)">

<div style="position: absolute; background: URL(...); 
       top: ...; left: ...; width: ...; height: ...; filter: blur(3px)">

更新：这里是完美的：http ://css-tricks.com/blurry-background-effect/

于 2013-07-06T02:14:07.720 回答