Question

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

这是我的代码：

＆＃13;

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;
}

＆＃13;

<div class="contain" align="right">
  <div class="box">
    <h1>Header</h1>

    <p>Paragraph. Something to write...</p>
  </div>
</div>

＆＃13;

Answer 1

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

但是这个解决方案必须使用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/

＆＃13;

$(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);
});

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 2

在你的饱和度中，你实际上并没有将模糊效果添加到你的身体背景中，你需要将它添加到你的.box。

要获得您正在寻找的效果，请制作一个白色背景和50％或60％不透明度的png文件以获得透明效果。将该PNG用作.box背景，并在框中应用模糊：

.box{

border: 1px solid #fff;
border-radius: 10px;
padding: 10px;
width: 200px;
height:200px;
background-image:url('back.png');
position: relative;
z-index: 1
display: block;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}

back.png是您将创建为.box背景的文件。

您还可以应用CSS opacity来提高透明度

Answer 3

我希望这有帮助......

   <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>BACKGROUND IMAGE OPACITY</title>
<style>

.box{
position: relative;
z-index: 3;
border: 1px solid #FFF;
padding: 64px;
width: 100%;
}
.box-container{  
position: relative;
width: 400px;
}
.box-container:before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
background-image: url(http://img0.mxstatic.com/wallpapers/6cba18f8e9c95b677bcc999c1e73e496_large.jpeg);
background-repeat: no-repeat;
background-size: cover;
opacity: 0.4;
}
</style>
</head>
<body>
<div class="box-container">
  <div class="box">
<h1>Header</h1>

<p>Paragraph. Something to write...</p>
  </div>
  </div>

</body>
</html>

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

3 个答案:

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