iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
1
自我挑戰組

sass&css 30天學習日誌系列 第 8

CSS: 偽元素應用- 背景

在此做的背景效果有兩個:毛玻璃和彩色透明背景
如下圖:

https://ithelp.ithome.com.tw/upload/images/20200411/201073216uYzrOVGWi.png

毛玻璃

上圖中可看出模糊的圖案是最底層的背景圖,並且滑動時,該區塊以內的背景是模糊的,所以背景和毛玻璃區塊是同一背景,作法如下:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321tMckiQRtB5.png

流程:

  1. 背景佔全版,文字區塊置
  2. 文字區塊設定3層
    a. 相對定位圖層
    b. 裁切區域
    c. 毛玻璃圖片

1.背景佔全版,文字區塊置中

找到一張全版大圖片,素材來源:unsplash
套用在body,在此範例中圖片position有稍做改變,改為較適當的角度
http://t.cn/E7t9JiQ
並在body內使用flex來垂直置中毛玻璃區塊(box),在box裡面新增毛玻璃背景圖層(bg)

https://ithelp.ithome.com.tw/upload/images/20200411/20107321pp0bd1QKoF.png

2.文字區塊設定3層

a.相對定位圖層

box設定寬高和以及相對定位後,把背景色設置透明並給予外框方便定位玻璃位置

https://ithelp.ithome.com.tw/upload/images/20200411/20107321rSrOzkzic4.png

b.裁切區域

在bg區塊內設定裁切區域,並填滿整個空間所以4個方向都設0,先給予背景色看效果

https://ithelp.ithome.com.tw/upload/images/20200411/20107321Cuex20Ftig.png

原先文字被蓋到就給z-index:-1,把背景色拿掉

https://ithelp.ithome.com.tw/upload/images/20200411/20107321dqT23SNxqi.png

c.毛玻璃圖片

在bg內設定偽元素,並把圖片放在裡面

https://ithelp.ithome.com.tw/upload/images/20200411/20107321XLpe3iJnqB.png

背景圖片跟bg內圖片不一致,使用background-attachment:fixed,就可變一致
模糊效果使用filter的blur就有效果出現
https://ithelp.ithome.com.tw/upload/images/20200411/20107321q3MEwuKN2n.png

仔細觀察玻璃是往內縮

https://ithelp.ithome.com.tw/upload/images/20200411/20107321h0FpQAOPns.png

要修正這個問題,可把絕對定位的四個方向往外擴散,0改為-20

https://ithelp.ithome.com.tw/upload/images/20200411/20107321YwKlxR8ccd.png

往外擴散多於的部分使用overflow:hidden

https://ithelp.ithome.com.tw/upload/images/20200411/20107321lb6ICoOcQE.png

最後box裡面的border可拿掉

https://ithelp.ithome.com.tw/upload/images/20200411/20107321YJSFlWFq56.png

彩色透明背景

https://ithelp.ithome.com.tw/upload/images/20200411/20107321GJmmnHE0DI.png

從上圖可看到分成有色圖層和背景圖層
做法跟上面差不多,只是幫裁切圖層上色和沒有設置玻璃範圍,其他都一模一樣

https://ithelp.ithome.com.tw/upload/images/20200411/20107321rD4lSsZMPO.png

差異處在此:

1.裁切圖層

a.增加背景色
b.刪除overflow: 沒有多餘玻璃範圍所以就拿掉

https://ithelp.ithome.com.tw/upload/images/20200411/20107321neWA0FuBxF.png

2. 偽元素順序

a.背景圖外還有背景色,所以在此背景圖層的z-index要設定顯示在背景色bg後面
b.背景圖要設透明度和模糊

https://ithelp.ithome.com.tw/upload/images/20200411/20107321B1NvmmmC5n.png

codepen: https://codepen.io/yuski/pen/vVmaOx
文章取材來源: https://www.youtube.com/watch?v=SmFxwLRSulM&t=1751s


上一篇
CSS: 偽元素應用- Step progress bar 進度條
下一篇
CSS: RWD技巧-等比例圖片、隱藏多餘文字
系列文
sass&css 30天學習日誌30

尚未有邦友留言

立即登入留言