堡政島

我們常在許多網站看到這樣的一個例子 , 

 

一個明亮的背景圖 , 通常會讓我們想表達的焦點模糊掉 , 

 

因此都會特別灰暗背景以突顯焦點 , 

 

以底下的範例來說 , 

 

若直接在 #bg 設定 background 的圖片以及 rgba , 

 

結果只會出現灰暗背景卻沒有背景圖片 , 

 

並無法達成灰暗背景的效果 , 

 

因此利用 ::before 的特性 , 將 rgba 設定在 ::before 身上 

 

底下為我們要完成的範例 , 

 

 

JS Bin