CSS：解决方法背景过滤器？ [英] CSS: Workaround to backdrop-filter?

问题描述

BACKGROUND-FILTER 是最新的css功能，目前尚未在现代浏览器中使用（至少截至2016年7月1日）。

• Chrome 51通过实验性Web平台标志支持 backdrop-filter 。
>

• Safari 9.1通过 - webkit - 前缀支持它
  
• Firefox 47不支持
>

处于这种无法使用的状态，我想知道是否有任何其他方法可以带来相同的结果。 b
$ b

模糊，灰度......的JS解决方法也值得欢迎

开发背景滤镜可以通过 https：// bugs进行追踪。 chromium.org/p/chromium/issues/detail?id=497522

解决方案

我不知道if你仍然在追逐这个问题，但是对于未来的其他用户来说：

这个效果可以用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;位置：相对; padding：10px 5px;背景：hsla（0，0％，100％，.3）; font-size：20px; font-family：'Lora'，serif;行高：1.5; border-radius：10px;宽度：60％; box-shadow：5px 3px 30px black; overflow：hidden;} main :: before {content：'';保证金：-35px;位置：绝对; top：0;正确：0;底部：0;左：0; filter：blur（20px）; z-index：-1;}

< main> < blockquote>我们越经常看到我们周围的事物，即使是美丽而美妙的事物，我们也越能看到我们看不见的东西，这就是为什么我们经常想当然地认为这是美丽的世界：花，树，鸟，云，甚至是我们所爱的人，因为我们经常看到事物，所以我们越来越少看到它们。 <页脚>&安培; MDASH; <举> Joseph B. Wirthlin< / cite> < /页脚> < / blockquote>< / main>

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

快速注释：

根据您已设定的网站结构， Z-Index 可能与示例中描述的不同。

backdrop-filter is a recent css feature, that is not yet available in modern browsers (at least as of July 1, 2016).

• Chrome 51 supports backdrop-filter via Experimental Web Platform flag.
• Safari 9.1 supports it with --webkit- prefix
• Firefox 47 have no support

Being in such an unusable state, I would like to know whether there exists any alternative way to bring in the same result.

JS workarounds for blur, grayscale, ... are also welcome

The development of backdrop-filter can be tracked through https://bugs.chromium.org/p/chromium/issues/detail?id=497522

解决方案

I don't know if you're still chasing this question, but for other users in future:

This effect can be accomplished as follows with CSS Pseudo-Classes, no JavaScript is necessary! shown below:

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>

Live example can be seen on Codepen: https://codepen.io/jonitrythall/pen/GJQBOp

Quick Note:

Depending on your already set out website structure, your Z-Index may be different to the one described in the example.

这篇关于CSS：解决方法背景过滤器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！