如何模糊 div 后面的内容？ [复制]答案

【问题标题】：How to blur content behind div? [duplicate]如何模糊 div 后面的内容？ [复制]
【发布时间】：2012-07-24 21:04:41
【问题描述】：

可能重复：
Blur Img's & Div's in HTML using CSS

所以基本上我想要做的是模糊内容女巫在 div 元素后面，div 的不透明度为 0 - 0.5。

这是jsFiddle

编辑[1]：我真正想要的是div 越过图像，div 下方的区域被模糊。 编辑[2]： div 和 position: absolute 遍历其他元素并模糊它们。

【问题讨论】：

this blog post 可能会有所帮助
HTML5 Please 建议您不要这样做。过滤器规范甚至不处于工作草案状态。
@MrOBrian 是的，它在某种程度上展示了我的撤退解决方案，但不是真正的解决方案。
考虑使用模糊的 iframe 'scrollsies' 父级 - 它有点 hacky 但这里是 chrome 中的工作演示 - s3.amazonaws.com/blur-demo/index.html

标签： javascript jquery html css svg

【解决方案1】：

您应该在上传时模糊图像。然后在上传时裁剪其他图像（或使用 jQuery/css 裁剪）。然后结合你必须达到的效果。

使用 css 来完成这项任务是不可能的。使用 javascript 来完成这项任务是个坏主意（非常慢）。

唯一的选择是在背景图像上使用this 技术，然后在其上放置另一个（使用 js/upload 裁剪）。

【讨论】：

【解决方案2】：

跟进@Keith Nicholas 在评论中引用的Purmou 的回答，您可以执行以下操作：

topblur{
    position: absolute;
    top:2px;
    left:2px;
    width: 100%;
    height: 150px;
    background-image:url(http://www.stefanides.com/home/yard/back%20yard.jpg);
    opacity: 40;
    filter:alpha(opacity=40); 
    border: thin solid black;
}

不是一个很好的解决方案，但它确实把图像弄乱了！

【讨论】：

好吧，您的建议是，我在给定位置上同时设置四个不同的div 元素以模拟模糊效果，更不用说我需要在div 中渲染图像位置女巫正在检查图像。但我真正想要的是给定div 下的任何元素都是模糊的。
没有。不建议动画任何东西。只是想建议你想要什么——在 div 上放置一个 div 以使其模糊。中转 div 只是相同的图像移动了几个像素。
如果图像和div 都处于静态位置，这是个好主意。但我想要的更像是放大镜。