Question

假设我的网站按层次排列。

背景图片（background-size:cover;）
500 x 500 div带有半透明的白色背景。
div中的内容。

我想要的是div下的区域（在背景图像上）要模糊。我的问题是，随着屏幕尺寸的变化，我不能将背景图像“预先模糊”，因为div不会始终与背景对齐。

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

由于

在旁注我想过在背景和之前谈到的div之间有一个div，背景图像和背后的背景图像相同，但设置它的背景位置以匹配前景div，只是模糊它。有点像在像ps这样的程序中放大照片而导航器中的框只是指显示图像的那一部分。

Answer 1

对于您尝试执行的操作，这可能有点重，但您可以使用Blur.js

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

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

Answer 2

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

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

模糊背景图像的特定部分

2 个答案: