純CSS實現底層毛玻璃效果（程式碼範例）

這篇文章帶給大家的內容是關於純CSS實現底層毛玻璃效果（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

毛玻璃背景是一個很常見的網頁樣式，想要實現，其實並不難，但經過我在網上的搜索發現，大量實現方法都較為不規範，且把問題複雜化了（例如各種z-index屬性與position的定位）

現提供一個程式碼很直白且實作效果良好的實作方案，改良自W3Schools

HTML部分

nbsp;html>

  
    <meta>
    <title>FrostedGlass</title>
    <link>
  
  
    <div>
      <div>
        <p>this is FrostedGlass</p>
      </div>
    </div>
  

.mainHolder是主框體
.textHolder是毛玻璃區域
.p是浮於毛玻璃上的文字內容

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屬性。設定為relative後，會將p從被遮蔽狀態「提起來」。
另外，對於不同的瀏覽器內核，filter的寫法會有些許不同。

#

以上是純CSS實現底層毛玻璃效果（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！