選擇的類名最好描述其中包含的信息類型，而不是想要達到的視覺效果。

一般來說，前景是元素的文本，不過前景還包括元素周圍的邊框。color屬性可以用來設置前景色。color有很多用法，其中最基本的是替換HTML3.2的BODY屬性TEXT、LINK、ALINK和VLINK。color值可以影響元素周圍的邊框。color（從理論上講）可以為表單元素設置color值。元素的背景區包括前景之下直到邊框外邊界的所有空間，因此，內容框和內邊距都是元素背景的一部分，且邊框畫在背景之上。background-color可以設置元素的背景顏色。background-color不能繼承，默認值是transparent。

background-image屬性可以把圖像放入背景。允許向任何元素應用背景圖像，可以是塊級元素也可以是行內元素。類似于background-color，background-image也不能繼承，實際上，所有背景屬性都不能繼承。使用背景圖像的同時最好再指定一個背景色。background-repeat設置圖像重復的方式，值：repeat|repeat-x|repeat-y|no-repeat|inherit，默認值是repeat。repeat導致圖像在水平垂直方向上都平鋪，repeat-x和repeat-y分別導致圖像只在水平或垂直方向上重復，no-repeat則不允許圖像在任何方向上平鋪。

background-position可以給背景定位，可以使用一些關鍵字：top、bottom、left、right和center，還可以使用長度值和百分數。位置關鍵字可以按任何順序出現，只要保證不能超過兩個關鍵字，一個對應水平方向，一個對應垂直方向。如果只出現了一個關鍵字，則認為另一個關鍵字使center。百分數同時應用于元素和原圖像，如果用百分數設置位置，水平值總是先出現。如果只提供了一個百分數值，所提供的這個值將用作水平值，垂直值假設為50%。在為原圖像的位置提供長度值時，這些長度值將解釋為從元素內邊距區左上角的偏移，偏移點是原圖像的左上角，即原圖像的左上角與background-position聲明中指定的點對齊。可以結合使用長度和百分數值。如果使用長度值或百分數值，可以使用負值將原圖像拉出元素的背景區。

background-attachment屬性可以設置原圖像相對于可視區是否固定，值：scroll|fixed|inherit。值為fixed時，首先，圖像不會隨文檔滾動，其次，原圖像的位置由可視區的大小確定，而不是包含該圖像的元素的大小（或在可視區中的位置）決定。值為scroll時，背景會隨文檔滾動，而且當窗口大小調整時，不一定改變原圖像的位置。如果一個背景圖像已經固定（fixed），它會相對于可視區定位，而不是相對于包含該圖像的元素定位。不過，背景將只在其包含元素中可見。

背景屬性可以匯總到一個簡寫屬性background，值：[<background-color>||<background-image>||<background-repeat>||<background-attachment>||<background-position>]|inherit.background沒有必不可少的值，只要至少出現一個值就行。

?

轉載于:https://www.cnblogs.com/dingzibetter/p/6160275.html

總結

以上是生活随笔為你收集整理的9颜色和背景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。