如果div覆盖另一个HTML元素，如何使模糊效果？

Question

我想确定div有一个模糊过滤器，所以当它们在网站上的其他元素上时，它们的背景会变成模糊的元素图像。

最好在Stylus中。

Apple在Apple TV website上使用此功能，如下所示：

Answer 1

假设您要定位最新的Safari浏览器，可以使用backdrop-filter引入的webkit。

backdrop-filter: blur(2px);

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

要了解详情，请访问此 MDN 链接。

<强>更新

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新2：

在Safari以外的浏览器中创建backdrop-filter效果的一种肮脏但有效的方法。 仅在背景为img 的情况下才有效。我用jQuery来达到目标​​。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;