移至主內容

色彩、背景與漸層

色彩、背景與漸層

Written by Wanding on 31 August 2020

多久沒改編網頁的色彩了呢?把預設的白底黑字與藍色的連結改變成任何的色彩組合。改變文字顏色只是個開始, 最終是讓頁面上的文字呈現各種不同的色彩,等到能加上背景的影像之後,似乎就變得無所不能。 CSS帶領色彩與背景進入全新的境界,賦予頁面或元素各種不同的色彩與背景。

 

1. 色彩

使用CSS能夠設定任何元素的前景和背景。前景指的是一般的文字,也包含元素周圍的邊框。 也就是,有兩種直接影響元素前景的方法:一種是使用color屬性,另一種是使用邊框屬性改變邊框的顏色。

 

前景顏色

要改變元素的前景顏色,最簡單的方法就是使用color屬性。設定及輸出如下方所示:(為方便閱讀字體放大)

<p style="color: red">使用太多的色彩會造成使用者的負擔</p>
<p>使用太多的色彩會造成使用者的負擔</p>
fontcolor
顏色的另一個用途是讓特定類型的文字更為醒目,比如粗體字已經十分明顯,但是如果再換上不同的顏色,就會更加顯眼。(為方便閱讀字體放大)
b,strong {color:maroon}
strongcolor

影響邊框

color值也能夠影響元素周圍的邊框,如果我們作以下的宣告
p.aside {color:orange; border-style:solid;}
當我們使用<p class="aside">元素時,就會出現橘色的文字和邊框
strongcolor

影響影像邊框

由於影像本身就包含了顏色,所以設定color並不會影響影像圖片內容,但可以用來改變影像周圍出現的所有邊框。 color或border-color都能夠產生相同的效果。
img.type1 {border-style:solid; color:gray;}
img.type2 {border-style:solid; border-style:gray;}

 

2. 背景

元素的背景區域預設是包含了前景之後的所有空間直到邊框外緣,也就是內容方框與內距區域都是元素背景的一部分,邊框則是描繪在背景之上。

 

背景顏色

要指定元素的背景顏色,就得使用background-color屬性,這個屬性可以使用所有合法的顏色值。
p {background-color:#adebeb;}
strongcolor

特殊效果

結合color與background-color能夠產生一些有趣的效果。
h2 {color:white; background:#1a1a1a;}
strongcolor

背景影像

以往在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軸重複

 

3. 漸層

有兩種新的影像是完全由CSS產生:線性漸層(linear gradient)與放射性漸層(radial gradient),兩種類型分別再係分為重複和非重複。漸層最常使用在背景,也可以用在任何能夠使用影像圖片的場合。

漸層就是從一個顏色平滑的轉換到另外一個顏色,例如從白色到黑色的漸層,會逐漸變暗到灰色,最後再變成黑色。各種色調之間變化的程度會依能夠作漸層的空間而定。

body {background-image: linear-gradient(90deg, white, black);}
則會形成一個由白到黑漸層的body區域
strongcolor

線性漸層

線性漸層的基本語法為linear-gradient(angle,to side,color1,color2),如下例:
body1 {background-image:linear-gradient(cyan,orange);}
strongcolor
body2 {background-image:linear-gradient(90deg,cyan,orange);}
strongcolor
body3 {background-image:linear-gradient(to left,cyan,orange);}
strongcolor
body4 {background-image:linear-gradient(-45deg,cyan,white,orange);}
strongcolor
body5 {background-image:linear-gradient(to bottom left,cyan,white,orange);}
strongcolor

放射性漸層

線性漸層雖然很酷,但有時候需要的是圓形的漸層,能夠用來產生焦點、圖形的陰影、光芒等等效果。使用的語法與線性漸層相似。
radial-gradient(shape|size|position,color1,color2)
body {background-image:radial-gradient(100px,cyan,orange);}
strongcolor
 

結論

設定元素的顏色背景是網頁作者十分強大的工具,比起傳統的作法,用CSS設定顏色與背景的優點在於能夠作用在文件中的任何元素!

回目錄頁