CSS：如何在div中模糊背景图像？

debugcn 发表于 Dev

共生复合体

我想模糊仅在背面的背景图像，div但是如果我尝试添加filter:blur(10px);css，则div只会模糊而不是背景。我希望它是这样的：

这是我的代码：

body {
  background-image: url(http://img0.mxstatic.com/wallpapers/6cba18f8e9c95b677bcc999c1e73e496_large.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
}
.contain {
  width: 100%;
  height: 100%;
}
.box {
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 10px;
  width: 200px;
  background-color: #fff;
  opacity: 0.7;
}

<div class="contain" align="right">
  <div class="box">
    <h1>Header</h1>

    <p>Paragraph. Something to write...</p>
  </div>
</div>

黄

最后，我制定了解决方案：

但是此解决方案必须使用javascript来获得反馈的位置。

我们.bg在.box容器中嵌入了一个内部背景层。
调整大小与.bg一样大body，因此背景大小相同。
设置了负marginTop和marginLeft向.bg层，根据该.box位置。因此.bg图像与图像重合body。
设置一个负marginBottom向.bg的，所以在框中的初始内容被放回正确的。
请记住先将设置overflow: hidden为.box，然后再将设置filter: blur(??px)为.bg。

为了保持效果，每次移动时都需要调出样式设置语句.box。

另请参见演示：http : //jsfiddle.net/52mk6816/

$(function() {
  function render() {
    $('.bg').removeAttr('style').css({
      width: $('body').width(),
      height: $('body').height(),
      marginLeft: -$('.box').offset().left - 11,
      marginTop: -$('.box').offset().top - 11,
      marginBottom: -$('body').height() + $('.box').offset().top + 11,
    });
  }
  render();
  // When the window resizes, or the `.box` moves/resizes, recall the `render` function.
  $(window).resize(render);
});

body {
  background-image: url(http://img0.mxstatic.com/wallpapers/6cba18f8e9c95b677bcc999c1e73e496_large.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.contain {
  padding: 10px;
}
.box {
  border: 1px solid #fff;
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
  width: 200px;
  overflow: hidden;
}
.bg {
  position: relative;
  background: url(http://img0.mxstatic.com/wallpapers/6cba18f8e9c95b677bcc999c1e73e496_large.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
  filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contain" align="right">
  <div class="box">
    <div class="bg"></div>
    <h1>Header</h1>
    <p>Paragraph. Something to write...</p>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。