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

Question

backdrop-filter是最新的css功能，现在尚未在现代浏览器中提供（至少截至2016年7月1日）。

• Chrome 51通过实验性网络平台标志支持backdrop-filter。
• Safari 9.1支持--webkit-前缀
• Firefox 47不支持

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

JS模糊，灰度等的变通办法也很受欢迎

可以通过https://bugs.chromium.org/p/chromium/issues/detail?id=497522

跟踪backdrop-filter的发展

Answer 1

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

使用CSS Pseudo-Classes可以实现如下效果，不需要JavaScript！ 如下所示：

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

hive> insert into table A1 select id,age,symptoms_pertaining_illness,sex from allcities;
Query ID = hduser_20160723195334_b34925b4-d6b7-46f2-a5ef-2e9e6b7c5293
Total jobs = 3
Launching Job 1 out of 3
Number of reduce tasks is set to 0 since there's no reduce operator
Starting Job = job_1469283576772_0001, Tracking URL = http://gaurav-HP-Notebook:8088/proxy/application_1469283576772_0001/
Kill Command = /usr/local/hadoop/bin/hadoop job  -kill job_1469283576772_0001
Hadoop job information for Stage-1: number of mappers: 3; number of reducers: 0
2016-07-23 19:53:43,738 Stage-1 map = 0%,  reduce = 0%
2016-07-23 19:53:58,136 Stage-1 map = 33%,  reduce = 0%, Cumulative CPU 18.15 sec
killing job with: job_1469283576772_0001
gaurav@gaurav-HP-Notebook:~$

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

快速注意：

根据HTML文档的结构， 您的 z-index可能与示例中描述的不同。

Answer 2

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

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

过滤器可在currently supported个浏览器中使用。 （启用了实验性Web平台功能的Safari和Chrome）如果规范在此之前没有发生变化，代码也应该适用于支持未加前缀backdrop-filter的未来浏览器。

没有和支持背景过滤器的示例：

Answer 3

从Chrome M76开始，背景幕过滤器现已发货，没有前缀并且没有需要的标志。

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

Answer 4

使用SVG过滤器。 它们像护身符一样工作。检出此示例CodePen。

Chrome Canary现在默认支持

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

更新

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

Answer 5

如 this page 所述，在 layout.css.backdrop-filter.enabled 页面上将首选项 false 的值从 true 更改为 about:config 似乎对我有用。

我使用的是 Firefox Developer 87.0b1（64 位）

Answer 6

您可以尝试在背景图片中添加不同的滤镜：

https://css-tricks.com/almanac/properties/f/filter/

对此的垮台是它只适用于图像。

基本上，CSS filter属性有10个内置过滤器：

• 模糊（PX）
• 亮度（％）
• 对比度（％）
• 投影（h-shadow v-shadow blur spread color）
• 灰度（％）
• 色调旋转（度）
• 转化（％）
• 不透明度（％）
• 饱和（％）
• 棕褐色（％）

另外，你可以提供一个url，它包含一个带有appropariate过滤器的XML文件。