css - 当一个div覆盖另一个HTML元素时如何制作模糊效果？

Question

我想让某些 div 具有模糊滤镜，这样当它们出现在网站上的其他元素上时，它们的背景就会变成元素的模糊图像。

最好在 Stylus 中。

Apple 在他们的 Apple TV website 上使用了它如下图:

Answer 1

假设您想要针对最新的 Safari 浏览器，您可以使用 webkit 中引入的 backdrop-filter。

backdrop-filter: blur(2px);

但请记住，它目前仅适用于最新版本的 Safari。如您所见 here .

要了解更多信息，请访问此 MDN 链接。

更新:

您可以使用以下技巧为其他浏览器创建效果。请注意，如果您只想使背景的一部分模糊，它将不起作用。

.container {
  width: 70%;
  height: auto;
  position: relative;
  overflow: hidden;
}
.backdrop {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
}
.backdrop img {
  width: 100%;
  max-width: 100%;
}
.overlay {
  opacity: 0.6;
  background: #f2f2f2;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  padding-top:100px;
  box-sizing:border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="backdrop">
    <img src="http://lorempixel.com/400/200/">
  </div>
  <div class="overlay">This is just an overlay</div>
</div>

更新 2:

在 Safari 以外的浏览器中创建 backdrop-filter 效果的肮脏但有效的方法。 这仅在背景是 img 的情况下有效。我使用 jQuery 来实现目标。

$(window).load(function() {
  bgWidth = $('.backdrop img').outerWidth();
  bgLeft = $('.backdrop img').offset().left - $('.overlay').offset().left;
  bgTop = $('.backdrop img').offset().top - $('.overlay').offset().top;
  bg = $('.backdrop img').prop('src');

  //console.log($('.backdrop img').offset().top, $('.overlay').offset().top)

  $('.overlay .blury').css({
    'background-image': 'url(' + bg + ')',
    'background-size': bgWidth + 'px auto',
    'background-position': (bgLeft) + 'px ' + (bgTop) + 'px'
  })
})

.container {
  width: 70%;
  height: auto;
  position: relative;
  overflow: hidden;
}
.backdrop img {
  width: 100%;
  max-width: 100%;
}
.overlay {
  background: #f2f2f2;
  width: 50%;
  height: 50%;
  left: 25%;
  top: 25%;
  position: absolute;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding-top: 40px;
  box-sizing: border-box;
}
.overlayText, .overlay .blury {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
}
.overlayText{
  z-index:2;
  background:rgba(255, 255, 255, 0.3);
}
.overlay .blury {
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -ms-filter: blur(15px);
  -o-filter: blur(15px);
  filter: blur(15px);
  z-index:1;
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="backdrop">
    <img src="http://lorempixel.com/400/200/">
  </div>
  <div class="overlay">
    <div class="overlayText">This is just an overlay</div>
    <div style="" class="blury"></div>
  </div>
</div>