91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS實現底層毛玻璃效果的方法

發布時間:2020-10-19 14:24:55 來源:億速云 閱讀:205 作者:小新 欄目:web開發

這篇文章給大家分享的是有關CSS實現底層毛玻璃效果的方法的內容。小編覺得挺實用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。


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

現提供一個代碼很直白且實現效果良好的實現方案,改良自W3Schools

HTML部分

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

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

CSS部分

* {
  box-sizing: border-box;
}
.mainHolder {
  width: 600px;
  height: 600px;
  background-image: url(https://cache.yisu.com/upload/information/20200318/93/11353.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實現底層毛玻璃效果的方法就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

石泉县| 开封县| 大渡口区| 天气| 凤台县| 鄱阳县| 无棣县| 岱山县| 本溪市| 榆树市| 龙井市| 全椒县| 旬阳县| 武汉市| 高阳县| 三亚市| 泸溪县| 东丰县| 大足县| 天镇县| 安康市| 太原市| 九台市| 东方市| 安西县| 镇赉县| 大冶市| 沾化县| 安阳县| 巫溪县| 潢川县| 南雄市| 宁阳县| 吴川市| 淳安县| 麦盖提县| 伊春市| 大连市| 灵寿县| 河北区| 扎囊县|