为什么我的磨砂玻璃效果 css 不起作用？答案

【问题标题】：Why my css of frosted glass effect doesn't work?为什么我的磨砂玻璃效果 css 不起作用？
【发布时间】：2017-05-25 09:58:55
【问题描述】：

我创建了一个演示页面来试用新引入的backdrop-filter 属性。但是我看不到任何模糊。

我使用 Chrome 58 并打开了 #enable-experimental-web-platform-features 标志，并且我在其他人的作品中看到了磨砂玻璃效果，包括MDN上的官方demo

这是我的代码。

/* Helper */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.--frosted-glass {
  background: #fff;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(15px);          /* Google Chrome */
  -webkit-backdrop-filter: blur(15px);  /* Safari for macOS & iOS*/
}

@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .--frosted-glass {
    background: rgba(255, 255, 255, 0.5);
  }
}

.promotions {
  width: 100%;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.promotion-box {
  position: relative;
  overflow: hidden;
  float: left;
  padding: 0px;
  width: 370px;
  height: 297px;
  margin: 5px;
  border-radius: 6px;
}

.promotion-img {
  margin: 0px;
  padding: 0px;
  height: 100%;
  float: left;
  z-index: -1;
  -webkit-transition: transform 1s ease;
  -webkit-transition: -webkit-transform 1s ease;
  transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  transition: transform 1s ease, -webkit-transform 1s ease;
}

.promotion-airline {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 50%;
  padding: 10px;
  z-index: 10;
  border-bottom-right-radius: 6px;
  overflow: hidden;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .1);
}

.promotion-airline::before {
  -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .25);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .25);
}

.promotion-airline>img {
  max-width: 100%;
  max-height: 50px;
  z-index: 10;
}


/* Hover */
.promotion-box:hover>.promotion-img,
.promotion-box:focus>.promotion-img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

<ul class="promotions">
  <li class="promotion-box">
    <img class="promotion-img" src="https://upload.wikimedia.org/wikipedia//commons/thumb/b/bb/Sydney_Harbour_welcomes_Jessica_Watson.jpg/400px-Sydney_Harbour_welcomes_Jessica_Watson.jpg">
    <div class="promotion-airline --frosted-glass">
      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/02/Qantas_Airways_logo_2016.svg/156px-Qantas_Airways_logo_2016.svg.png" alt="By Cathay Pacific">
    </div>
  </li>
</ul>

https://codepen.io/qiansen1386/pen/oWmMrw

感谢任何指出 Chrome 尚不支持此功能的人，我知道。但是有一种方法可以通过打开 enable-experimental-web-platform-features 来启用它旗帜。见caniuse.com/#feat=css-backdrop-filter。我想知道的是，是因为我的代码有缺陷还是chrome的实现有缺陷。是否有任何 css 冲突尚未被 MDN 提及？

【问题讨论】：

你可以使用filter css来做模糊效果吗？
我用filter发布了一个例子，你可以查看
您分享的哪个链接 (developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Result) 明确提到不支持 chrome 和 firefox。
它不适用于 Chrome 或 Firefox。它仅适用于 Safari 9 和 iOS 9 及更高版本。

标签： css frontend effects

【解决方案1】：

.box {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1; 
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-image: url('http://lorempixel.com/200/200/');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  filter:blur(15px);
  -webkit-filter:blur(15px);
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

&lt;div class="container"&gt;&lt;/div&gt;

【讨论】：