多久沒改編網頁的色彩了呢?把預設的白底黑字與藍色的連結改變成任何的色彩組合。改變文字顏色只是個開始,最終是讓頁面上的文字呈現各種不同的色彩,等到能加上背景的影像之後,似乎就變得無所不能。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設定顏色與背景的優點在於能夠作用在文件中的任何元素!