如何模糊div背后的内容？

Question

  

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

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

这是jsFiddle

编辑[1]：我真正想要的是div覆盖图像，而div下的区域是模糊的。 编辑[2]： position: absolute {{1}}会覆盖其他元素并模糊它们。

Answer 1

跟随@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;
}

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

Answer 2

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

使用css执行此任务是不可能的。使用javascript执行此任务是个坏主意（非常慢）。

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