CSS 背景屬性深度解析：background vs background-image 覆蓋規則實戰

現象複現

/* 統一設置半透明背景 */
li { background: rgba(0,0,0,0.5); }

/* 單獨某 li 設置箭頭圖標 */
li.special { background: url(arrow.png); }      /* 效果正常：半透明背景+圖標 */
li.special { background-image: url(arrow.png); } /* 效果異常：半透明背景消失，只剩圖標 */

根本原因：background 是簡寫屬性，會重置所有子屬性

根據 CSS 規範，background 等價於：

background-color: transparent;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
/* 還有 background-size, background-origin, background-clip 等新屬性 */

逐步演示

1. li { background: rgba(...); } → 實際設置了 background-color 並將 background-image 重置為 none。
2. li.special { background: url(...); } → 再次觸發簡寫重置：background-color 變回 transparent，但隨後瀏覽器解析 url(...) 作為 background-image。
   關鍵點：簡寫屬性執行順序是「先重置所有子屬性為初始值，再解析給定值」。因為 rgba() 被識別為 background-color 值，所以最終同時擁有「半透明色 + 圖片」。
3. li.special { background-image: url(...); } → 只修改 image 子屬性，不觸發簡寫重置。
   此時 background-color 仍為父級繼承的 rgba(...)？錯！ 父級的 background: rgba(...) 已將 background-color 設置在父元素上，子元素並未繼承 background-color（背景色不繼承）。子元素自己的 background-color 仍是初始值 transparent。結果：只有圖片，無半透明底色。

正確寫法三選一

/* 1. 繼續用簡寫，但把顏色寫進去 */
li.special { background: rgba(0,0,0,0.5) url(arrow.png) no-repeat 95% 50%; }

/* 2. 拆開寫，顯式聲明 color */
li.special { 
    background-color: rgba(0,0,0,0.5); 
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

/* 3. 用 background-color 覆蓋（推薦，語義清晰） */
li { background: rgba(0,0,0,0.5); }
li.special { background-color: rgba(0,0,0,0.5); background-image: url(...); }

核心口訣

簡寫屬性是「核彈」：一旦寫上，所有子屬性歸零重來。單屬性是「手術刀」：只動一處，其它不動。