編輯手記~透明與半透明

2019-08-30

過去我在處理網頁中背景顏色時,常常用到opacity來設定不透明度,然而它的小缺點在於會連帶影響其他標籤屬性,舉例來講,假如我想把欄位背景顏色透明化,欄位中的字往往也會隨之透明、難以看清楚。

即使可以偷懶(😁)選擇較淺的色號來代替透明化,讓背景不至於太喧賓奪主,但真要講究起來的話,兩者的效果仍然有天壤之別。

所以,🌈就🌈在🌈剛🌈剛🌈!!

我終於下定決心要找出僅針對背景顏色透明化的方法了!

雖然網路上已有不少相關的教學,不過對我來說,一點進去文章就看到成串的英文與數字在某種程度上真是嚇人,其實它執行起來沒有這麼困難的嘛~因此我就按照我的步驟再發文紀錄一下,權當是為將來的自己留下筆記囉📔

👇開始囉👇

一開始,我總是這麼設定背景顏色:

opacity示範-html

但如同上面提到的,這樣會使得區塊產生一種即將羽化登仙飄出螢幕看不清楚的感覺:

opacity示範-畫面

🐒不要緊張~只要把原本的背景色號丟到之前提過的Color Hex,利用上方搜尋欄進行檢索,就可以找到相對應的頁面:

color-hex

↗️在頁面右方可以看到RGB,請把這欄神奇的三個號碼複製起來,然後按照下圖格式、貼回剛剛的html區塊:

rgba示範-html

🌟注意哦!rgb後面要再加上a,即alpha值(alpha value),後面括號中相對應的第四個數值也就代表了不透明度,1=完全不透明、0=完全透明。

接下來看看結果吧!Do Re Mi So~~~~~🎶

rgba示範-畫面

哇哦,完全可以感受到作為邊緣人的強大怨念了呢!終於把存在感刷到巔峰了😆

🙈🙉🙊🙈🙉🙊

寫到這裡突然發現,截圖的時候不小心把游標也截進畫面裡了OAO!!

但我懶得重新截圖上傳啦......😥 可以想個辦法把它變透明嗎嗷嗷嗷嗷嗷~