CSS span 區域背景顏色設計

CSS span 區域標籤可以用來輕易的將網頁內容特定的部分標示起來並設計出不同的區域效果，例如改變文字的大小、顏色、樣式、字型 ... 等，都是可以的，同時 span 區域也可以擁有自己的背景顏色，網頁設計師只需要採用 CSS background-color 屬性就能輕易的修改 span 區域的背景顏色，我們先來看看 span 區域與 background-color 屬性的基本語法，再套用到範例中看實際的效果。

CSS span 區域標籤語法

要修改的內容

詳細用法：CSS span 標籤用法介紹。

CSS background-color 屬性與法

background-color: 顏色值;

詳細用法：CSS background-color 背景顏色

有了以上兩個基本的語法之後，我們就能將它們結合在一起來修改 span 的背景顏色，請看範例。

CSS span 區域背景顏色設計範例

藍色的背景顏色
紅色的背景顏色
橘色的背景顏色

範例的實際效果

藍色的背景顏色紅色的背景顏色橘色的背景顏色

範例中組共有三個不同的 span 組，分別透過 CSS 的 background-color 來將背景顏色調整為藍色、紅色以及橘色，從範例的實際效果可以看到相當明顯的差異，這就是修改 span 背景顏色的常用技巧。

延伸閱讀