国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

沈儉 / 1743人閱讀

摘要:設置為后,會生效,將從被遮擋狀態提起來。另外,對于不同的瀏覽器內核,的寫法會有些許不同。

寫在前面

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


HTML部分


  
    
    FrostedGlass
    
  
  
    

this is FrostedGlass

.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后,z-index會生效,將p從被遮擋狀態“提起來”。
另外,對于不同的瀏覽器內核,filter的寫法會有些許不同。


文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53346.html

相關文章

  • 實現一個成熟底層玻璃效果CSS

    摘要:設置為后,會生效,將從被遮擋狀態提起來。另外,對于不同的瀏覽器內核,的寫法會有些許不同。 showImg(https://segmentfault.com/img/bVbj6zV?w=599&h=600); 寫在前面 毛玻璃背景是一個很常見的網頁樣式,但大量實現方法都把問題復雜化了現提供一個代碼很直白且實現效果良好的實現方案,改良自W3Schools HTML部分 ...

    endiat 評論0 收藏0
  • CSS開發

    摘要:譯十六進制顏色揭秘原文地址原文作者譯文出自掘金翻譯計劃本文永久鏈接教程入門篇關于是一款進行柵格布局的輔助工具,它讓開發者擺脫了冗雜的數學計算,同時降低了樣式與結構的耦合程度。 【譯】CSS 十六進制顏色揭秘 原文地址:CSS Hex Colors Demystified 原文作者:Dave Gash 譯文出自:掘金翻譯計劃 本文永久鏈接:https://github.com/xitu/...

    warkiz 評論0 收藏0
  • 頁面頂部背景圖片如何設置上半部分為玻璃效果

    摘要:第二層要設置毛玻璃高度,和。要添加的背景圖片實際高度為最終展示的毛玻璃高度設置為后,若不設置,由于是空的,導致為毛玻璃高度要比最終的高度大才行上移設置和是為了左右邊緣也模糊度好設置模糊度在和下顯示都,在中沒有模糊效果,添加即可。 恩,我希望得到下圖這種效果。showImg(https://segmentfault.com/img/bVGosE?w=1919&h=400); 看起來so ...

    plus2047 評論0 收藏0
  • ReactNative開發常用三方模塊

    摘要:寫在前面一個好的缺不了好的三方支持,生活在這個活躍的開源社區,尋找合適的三方組件是一個開發者最基本的能力。下面分享幾個我收集的三方模塊,希望對大家有點幫助。 寫在前面 一個好的App缺不了好的三方支持,生活在ReactNative這個活躍的開源社區,尋找合適的三方組件是一個開發者最基本的能力。不過不積跬步,無以至千里,不積小流,無以成江海。下面分享幾個我收集的三方模塊,希望對大家有點幫...

    frolc 評論0 收藏0

發表評論

0條評論

沈儉

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<