模糊背景图像的特定部分

Question

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

我想要的是div下的区域(在背景图像上)要模糊.我的问题是,随着屏幕尺寸的变化,我不能将背景图像"预先模糊",因为div不会始终与背景对齐.

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

谢谢

在一个侧面说明我已经考虑过在背景和之前谈到的div之间有一个div,背景图像和它背后的背景图像相同但设置它的背景位置以匹配前景div并且只是模糊它.有点像在像ps这样的程序中放大照片而导航器中的框只是指显示的那部分图像.

Answer 1

这对于您想要做的事情来说可能有点繁重，但您可以使用Blur.js

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

如果您需要模糊的不仅仅是背景，请查看：
/sf/answers/1199435261/