爲什麼我的磨砂玻璃效果不起作用？

我創建了一個演示頁面來嘗試新引入的backdrop-filter屬性。但是我看不到任何模糊。爲什麼我的磨砂玻璃效果不起作用？

我使用Chrome 58 ＃使實驗性的Web平臺的功能標誌開啓和我已經看到了其他人的作品，包括官方的演示上MDN

的毛玻璃效果這是我的代碼。

/* 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瀏覽器已經不支持此功能的是，我知道。但是有一種方法通過轉動來啓用它on enable-experimental-web-platform-features flag。見caniuse.com/#feat=css-backdrop-filter。我想知道的是，無論是因爲我的代碼有缺陷還是鉻的實現有缺陷。 MDN有沒有提到過任何css碰撞？

來源

2017-05-25 Paris Qian Sen

你可以用'爲模糊效果filter' CSS？ – LKG

我發佈了一個'filter'的例子，你可以檢查 – LKG

你分享哪個鏈接（https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Result）顯然提到了chrome和Firefox不支持。 – LKG

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

<div class="container"></div>

來源

2017-05-25 10:24:06 LKG

爲什麼我的磨砂玻璃效果不起作用？

回答

相關問題