實現(xiàn)一個成熟的底層毛玻璃效果（純CSS）

endiat 發(fā)布于2019-08-29 17:22 / 528人閱讀

摘要：設(shè)置為后，會生效，將從被遮擋狀態(tài)提起來。另外，對于不同的瀏覽器內(nèi)核，的寫法會有些許不同。

寫在前面

毛玻璃背景是一個很常見的網(wǎng)頁樣式，但大量實現(xiàn)方法都把問題復(fù)雜化了
現(xiàn)提供一個代碼很直白且實現(xiàn)效果良好的實現(xiàn)方案，改良自W3Schools

HTML部分



  
    
    FrostedGlass
    
  
  
    
      
        this is FrostedGlass

.mainHolder是主框體
.textHolder是毛玻璃區(qū)域
.p是浮于毛玻璃上的文字內(nèi)容

CSS部分

* {
  box-sizing: border-box;
}
.mainHolder {
  width: 600px;
  height: 600px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  position: relative;
}
.textHolder {
  width: 100%;
  height: 200px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: inherit;
  overflow: hidden;
}
.textHolder::before {
  content: "";
  position: absolute;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  background-attachment: fixed;
  filter: blur(4px);
}
.textHolder::after {
  content: "";
  position: absolute;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.25);
}
p {
  z-index: 1;
  color: white;
  position: relative;
  margin: 0;
}

解決毛玻璃效果里最核心的問題：模糊效果不能影響字體，采用了偽元素::after和::before
值得注意的是，在p標簽里的position屬性。設(shè)置為relative后，z-index會生效，將p從被遮擋狀態(tài)“提起來”。
另外，對于不同的瀏覽器內(nèi)核，filter的寫法會有些許不同。