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

資訊專欄INFORMATION COLUMN

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

endiat / 531人閱讀

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

寫在前面

毛玻璃背景是一個(gè)很常見的網(wǎng)頁(yè)樣式，但大量實(shí)現(xiàn)方法都把問題復(fù)雜化了
現(xiàn)提供一個(gè)代碼很直白且實(shí)現(xiàn)效果良好的實(shí)現(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標(biāo)簽里的position屬性。設(shè)置為relative后，z-index會(huì)生效，將p從被遮擋狀態(tài)“提起來”。
另外，對(duì)于不同的瀏覽器內(nèi)核，filter的寫法會(huì)有些許不同。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114276.html

相關(guān)文章

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

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

    沈儉 評(píng)論0 收藏0

  • CSS開發(fā)

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

    warkiz 評(píng)論0 收藏0

  • 頁(yè)面頂部背景圖片如何設(shè)置上半部分為毛玻璃效果

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

    plus2047 評(píng)論0 收藏0

  • ReactNative開發(fā)常用的三方模塊

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

    frolc 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<