多久沒改編網頁的色彩了呢？把預設的白底黑字與藍色的連結改變成任何的色彩組合。改變文字顏色只是個開始，最終是讓頁面上的文字呈現各種不同的色彩，等到能加上背景的影像之後，似乎就變得無所不能。CSS帶領色彩與背景進入全新的境界，賦予頁面或元素各種不同的色彩與背景。
色彩
使用CSS能夠設定任何元素的前景和背景。前景指的是一般的文字，也包含元素周圍的邊框。也就是，有兩種直接影響元素前景的方法：一種是使用color屬性，另一種是使用邊框屬性改變邊框的顏色。
前景顏色
要改變元素的前景顏色，最簡單的方法就是使用color屬性。設定及輸出如下方所示
<p style="color:red;">使用太多的色彩會造成使用者的負擔</p>
<p>使用太多的色彩會造成使用者的負擔</p>
color的另一個用途是讓特定類型的文字更為醒目，比如粗體字已經十分明顯，但是如果再換上不同的顏色，就會更加顯眼。
b,strong {color:maroon;}
影響邊框
color值也能夠影響元素周圍的邊框，如果我們作以下的宣告
p.aside {color:orange; border-style:solid;}
當我們使用<p class="aside">元素時，就會出現橘色的文字和邊框
影響影像邊框
由於影像本身就包含了顏色，所以設定color並不會影響影像圖片內容，但可以用來改變影像周圍出現的所有邊框。color或border-color都能夠產生相同的效果。
img.type1 {border-style:solid; color:gray;}
img.type2 {border-style:solid; border-style:gray;}
背景
元素的背景區域預設是包含了前景之後的所有空間直到邊框外緣，也就是內容方框與內距區域都是元素背景的一部分，邊框則是描繪在背景之上。
背景顏色
要指定元素的背景顏色，就得使用background-color屬性，這個屬性可以使用所有合法的顏色值。
p {background-color:#adebeb;}
特殊效果
結合color與background-color能夠產生一些有趣的效果。
h2 {color:white; background:#1a1a1a;}
背景影像
以往在HTML裡，若要加上背景影像，通常會寫成<body background="sample.jpg>，而在CSS裡除了可以很容易做到與HTML效果，還能做一些更複雜的效果。CSS使用background-image屬性來設定背景影像。
p.starry {backgroud-image:URL; color:white;}
background-image的值有下列五種
- 影像的URL
- linear-gradient
- repeating-linear-gradient
- radial-gradient
- repeating-radial-gradient
背景位置
把影像圖片放到背景區之後，能不能決定影像放置的發法？當然可以，接下來我們使用background-position來設定背景位置。
body {background-image:URL;
background-repeat:no-repeat;
backgroun-position:center;
}
結果就是只有一張背景圖，回呈現在置中的位置上。有關backgroun-position的數值如下
- left | center | right | top | bottom | percentage | length
背景重複
要達到背景重複的效果，可以使用background-repeat屬性來設定。乍看之下似乎很複雜，實際上很簡單。背景重複共有四個值：repeat、non-repeat、space、round。
另外有兩個變化型：
repeat-x：只有針對水平的x軸重複
repeat-y：只有針對垂直的y軸重複
漸層
有兩種新的影像是完全由CSS產生：線性漸層(linear gradient)與放射性漸層(radial gradient)，兩種類型分別再係分為重複和非重複。漸層最常使用在背景，也可以用在任何能夠使用影像圖片的場合。
漸層就是從一個顏色平滑的轉換到另外一個顏色，例如從白色到黑色的漸層，會逐漸變暗到灰色，最後再變成黑色。各種色調之間變化的程度會依能夠作漸層的空間而定。
body {background-image: linear-gradient(90deg, white, black);}
則會形成一個由白到黑漸層的body區域
線性漸層
線性漸層的基本語法為
linear-gradient(angle,to side,color1,color2)
如下例
body1 {background-image:linear-gradient(cyan,orange);}
body2 {background-image:linear-gradient(90deg,cyan,orange);}
body3 {background-image:linear-gradient(to left,cyan,orange);}
body4 {background-image:linear-gradient(-45deg,cyan,white,orange);}
body5 {background-image:linear-gradient(to bottom left,cyan,white,orange);}
放射性漸層
線性漸層雖然很酷，但有時候需要的是圓形的漸層，能夠用來產生焦點、圖形的陰影、光芒等等效果。使用的語法與線性漸層相似。
radial-gradient(shape|size|position,color1,color2)
body {background-image:radial-gradient(100px,cyan,orange);}
小結
設定元素的顏色背景是網頁作者十分強大的工具，比起傳統的作法，用CSS設定顏色與背景的優點在於能夠作用在文件中的任何元素！
![[Day 06] - Vault Built-in help and Auth](/@alee801223/5bd186c6df5a49ffb236111a54307305?utm_source=coderbridge-com&utm_medium=indie_related_post_img&utm_campaign=Day05 - CSS色彩、背景與漸層_[Day 06] - Vault Built-in help and Auth_@alee801223_https://static.coderbridge.com/images/covers/default-post-cover-3.jpg)
