實現一個成熟的底層毛玻璃效果（純CSS）

時間 2019-11-08

標籤實現一個成熟底層毛玻璃效果 css 欄目 CSS 简体版

原文原文鏈接

寫在前面

毛玻璃背景是一個很常見的網頁樣式，但大量實現方法都把問題複雜化了
現提供一個代碼很直白且實現效果良好的實現方案，改良自W3Schoolscss

HTML部分

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>FrostedGlass</title>
    <link rel="stylesheet" href="frostedGlass.css">
  </head>
  <body>
    <div class="mainHolder">
      <div class="textHolder">
        <p>this is FrostedGlass</p>
      </div>
    </div>
  </body>
</html>

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

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後，z-index會生效，將p從被遮擋狀態「提起來」。
另外，對於不一樣的瀏覽器內核，filter的寫法會有些許不一樣。瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。