CSS:解决方案到背景滤镜？

Question

backdrop-filter 是最近的css功能,现在还没有在现代浏览器中使用(至少截至2016年7月1日).

• Chrome 51支持backdrop-filter通过Experimental Web Platform标志.
• Safari 9.1支持--webkit-前缀
• Firefox 47没有支持

处于这种无法使用的状态,我想知道是否存在任何其他方式来产生相同的结果.

JS的模糊,灰度等工作区也很受欢迎

backdrop-filter可以通过https://bugs.chromium.org/p/chromium/issues/detail?id=497522跟踪开发情况

Answer 1

我不知道你是否还在追问这个问题,但对于未来的其他用户:

这个效果可以通过CSS Pseudo-Classes实现如下,不需要JavaScript!如下所示:

body,
main::before {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0 / cover fixed;
}

main {
  margin: 100px auto;
  position: relative;
  padding: 10px 5px;
  background: hsla(0, 0%, 100%, .3);
  font-size: 20px;
  font-family: 'Lora', serif;
  line-height: 1.5;
  border-radius: 10px;
  width: 60%;
  box-shadow: 5px 3px 30px black;
  overflow: hidden;
}

main::before {
  content: '';
  margin: -35px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(20px);
  z-index: -1;
}

<main>
  <blockquote>"The more often we see the things around us &#45; even the beautiful and wonderful things &#45; the more they become invisible to us. That is why we often take for granted the beauty of this world: the flowers, the trees, the birds, the clouds &#45;
    even those we love. Because we see things so often, we see them less and less."
    <footer>&mdash;
      <cite>
        Joseph B. Wirthlin
      </cite>
    </footer>
  </blockquote>
</main>

在Codepen上可以看到实例:https://codepen.io/jonitrythall/pen/GJQBOp

快速注意:

根据您已经设置的网站结构,您的Z-Index可能与示例中描述的不同.

Answer 2

我用它来获得流行的磨砂玻璃效果.直到某人成功发明了一个好的polyfill,backdrop-filter因为我使用了一个稍微透明的背景作为后备:

/* slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

该过滤器适用于当前支持的浏览器.(启用了实验性Web平台功能的Safari和Chrome)backdrop-filter如果规范在此之前没有发生变化,代码也应该适用于未支持前缀的未来浏览器.

没有和支持背景滤镜的示例:

Answer 3

从 Chrome M76 开始，背景过滤器现已发货，无前缀且无需标记。

https://web.dev/backdrop-filter/

注意：（由于 Mozilla 尚未发布此答案，因此一直被否决）：此功能在 Safari、Chrome 和 Edge 中可用，但在 Firefox 中尚不可用。Mozilla计划很快发货，但还没有。因此，此答案不包含“变通方法”，而仅包含有关哪些浏览器需要变通方法的更多信息。这似乎仍然是有用的信息。

Answer 4

使用SVG过滤器。他们像魅力一样工作。签出此示例CodePen。

backdrop-filterChrome Canary现在默认支持。Firefox开发的优先级列表也在2019年。因此，它将很快在所有浏览器中得到支持，但是现在您可以使用SVG过滤器。

更新资料

SVG过滤器不能完全正常工作backdrop-filter。这只是一种解决方法，如果下面有移动的元素，则无法使用。无论如何，我认为我们backdrop-filter很快就能在生产中使用。现在，Chrome Beta中已默认启用该功能！这也意味着边缘。