前端干貨！實用全面的CSS background 屬性使用手冊

background是用來設(shè)置背景的元素，從最早的純色填充發(fā)展到現(xiàn)在，不僅支持漸變，甚至能用上混合模式！今天@不到布這篇好文將一一為你闡釋這些子屬性的用法，周末學起來！

background 屬性是CSS中用于設(shè)置元素背景的屬性，最簡單的background屬性名，是針對背景若干設(shè)定的合并簡寫，最早的CSS只能使用單一背景圖片，而在現(xiàn)在卻可以設(shè)置多個背景圖片。而不用圖片的話，最早的background只能使用純色填充，現(xiàn)在卻可以使用各種漸變效果。現(xiàn)在所用的模型來自于CSS Backgrounds and Borders Module Level 3所定義的規(guī)范，主要分成了8個子屬性。

背景顏色之 background-color

background-color是最早，最古老，最…常用的屬性之一，取值是唯一的，顏色值。

背景圖片之 background-image

background-image顧名思義是設(shè)置背景“圖片”的，這里的圖片并非我們通常意義上理解的“圖片”，而是由CSS Image Values and Replaced Content Module所規(guī)定的一系列內(nèi)容，用以替代CSS2中所規(guī)定的background-image屬性與list-style-image屬性中的url參數(shù)，或者作為偽元素content的值。現(xiàn)在瀏覽器也沒有完全實現(xiàn)這些，可用的包括url()引用圖片，和漸變“圖片”，然后以逗號分隔所有圖片（如果有）。

CSS 漸變

CSS漸變分成兩種，linear-gradient()的線性漸變和radial-gradient()的徑向漸變。兩個漸變在早期不同瀏覽器上的實現(xiàn)語法大相徑庭，所以用的人較少，還是傾向于使用圖片，現(xiàn)在各個瀏覽器的顯示和實現(xiàn)已經(jīng)基本趨向于一致，而且在手機端也有比較好的實現(xiàn)，在移動端開發(fā)完全可以廣泛使用了（但是在兼容IE9-的時候還是╮(╯_╰)╭），下面是詳細介紹，也可以用生成器來搞定啦。

線性漸變：linear-gradient(<angle>, <start>[, <stop>]+);

• <angle> 可以選擇 to top、to bottom、to left、to right這4個關(guān)鍵字和 *deg 設(shè)置， 0deg（↓）就相當于 to bottom， 90deg（←） 相當于 to left，以此類推。
• <start>， 的值則為<color>[ <position>]?，第一個和最后一個顏色不用寫，中間的顏色如果不寫的話，所有的顏色就會平均分布。

徑向漸變：

radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+)

我本想把這個語法簡寫一下的…減來簡去發(fā)現(xiàn)還是這么寫就好了（畢竟人家規(guī)范就是這么寫的，果然深思熟慮過）…從后往前說

<color-stop> 和線性漸變一樣，<color>[ <position>]?，也可以設(shè)定多個顏色值，而不寫位置的話，就按照規(guī)定的值平均分布。
顏色前面一大串：定義徑向漸變的圓心、位置和漸變模式。<shape> 是形狀，可選值為ellipses（橢圓）或者circles（正圓），如果整個元素是個正方形的話，兩個形狀就都一樣啦。

<size> 是尺寸，可以定義漸變的數(shù)值半徑，如果形狀是橢圓的話，需要填寫兩個尺寸值，按順序是水平半徑和垂直半徑，此時尺寸可以寫百分數(shù)。

尺寸另外還有4個關(guān)鍵字可用：closest-side（最近的邊）、farthest-side（最遠的邊）、closest-corner（最近的角）、farthest-corner（最遠的角），這4個關(guān)鍵字是指圓心相對于元素而言的，顧名思義想一下就好。

<position> 是圓心位置，需要在位置前面加上at，可以用position常用的關(guān)鍵字，也可以使用數(shù)值定義。

比如如下三行代碼，就是等價的：

1
2
3

radial-gradient(yellow, green);
radial-gradient(ellipse at center, yellow 0%, green 100%);
radial-gradient(farthest-corner at 50% 50%, yellow, green);

重復(fù)漸變：repeating-linear-gradient()和repeating-radial-gradient()

用法同上，只是這回是重復(fù)漸變了而已。這里有一些很漂亮的Demo，當然它主要是為展示background-blend-mode屬性建立的。

背景重復(fù)之 background-repeat

background-repead用于設(shè)置背景的重復(fù)方式，可選值有下面幾種：

• no-repeat 不重復(fù)，等價于no-repeat no-repeat
• repeat-X X軸方向（橫向）重復(fù)，等價于repeat no-repeat
• repeat-Y Y軸方向（縱向）重復(fù)，等價于no-repeat repeat
• repeat 重復(fù)平鋪，等價于repeat repeat
  除了這4個常用的，還有兩個…大概沒什么人用，兼容性也不是很好的取值：
• round 圖像在指定方向平鋪，會根據(jù)顯示空間的大小縮放圖像（什么時候縮放，什么時候增減平鋪的數(shù)量是由瀏覽器決定的）
• space 圖像會盡可能重復(fù)，但不裁剪，第一張和最后一張固定在元素兩端，剩下的均勻分布。此時background-position屬性被忽視。另外只有在圖像大過元素的時候會發(fā)生裁剪。

背景固定之 background-attachment

background-attachment用于設(shè)置背景相對的固定方式，可選值有：

• scroll 默認值，背景相對于元素固定。
• fixed 背景相對于整個窗口固定。隨著最近全屏大圖網(wǎng)站的流行，這種背景固定模式也日漸多見起來。
• local 背景相對于元素內(nèi)容固定，如果元素內(nèi)有滾動條，背景會隨著內(nèi)容滾動。
  local這種模式我們幾乎不怎么用到，這里找到一篇文章，作者寫了一個Demo，在元素出現(xiàn)滾動條的時候，會在它的可滾動方向出現(xiàn)陰影。雖然是屬于交互設(shè)計范疇，但隨著各個網(wǎng)站更加強調(diào)重視用戶體驗，這種需求是早晚的事，而作者的Demo是非常有趣（且有效率）的實現(xiàn)方式。

背景定位之 background-position

background-positon，顧名思義就是用來定位的…但是這個定位吧…語法很復(fù)雜（或者說很隨意）。可用的各種指示方向的關(guān)鍵字，也可以用數(shù)字單位或者百分比，寫法有下面幾種：

• 并列寫兩個關(guān)鍵字（或值），第一個值代表它的水平位置，第二個值代表它的垂直位置（這個和padding、margin、border這些先上下再左右的屬性剛好是反的…）。另外如果兩個都是關(guān)鍵字，那么位置可以交換，也就是說，center left是合法的，然而50% left不行。
• 只寫一個關(guān)鍵字（或值），那么它的第二個值就默認為center（居中）。
• 三、四值，可以從元素的四周定位，比如離右邊10px，底邊5px，就可以寫成right 10px bottom 5px，兩組關(guān)鍵字-值對可以交換位置，也可以用center替代關(guān)鍵字-值。這種寫法目前（2016-06）只有FF支持。

背景裁切之 background-clip

background-clip是設(shè)定背景所覆蓋的范圍的屬性。可選值有：

• border-box 默認值，背景延伸到邊框下，但是只有當邊框的顏色是半透明的時候才能看到延伸過來的背景。
• padding-box 邊框下沒有背景。
• content-box 只有內(nèi)容下有背景（padding的空間里都沒有）

背景原點之 background-origin

background-origin指定了背景圖片定位的原點。屬性取值與background-clip相同，但是clip是會對背景圖片進行裁切，而origin是用于定位的。

可以看這個Demo，展現(xiàn)得比較清晰了。

背景尺寸之 background-size

background-size用來設(shè)置背景尺寸，可選值有：

• 一對值\百分比或auto，百分比是相對于background-origin所設(shè)置的尺寸而言的，auto就是圖片原本的尺寸，兩個數(shù)值先寬后高。
• cover 縮放圖片，令其完全覆蓋背景區(qū)域，可能導(dǎo)致圖片某些區(qū)域不可見。
• contain 縮放圖片，令其以最大尺寸完整展現(xiàn)在背景區(qū)域中，可能導(dǎo)致背景某些區(qū)域變成空白。

變形金剛之 background

background是上面8個屬性的總和…可以把所有屬性寫在一起。順序不限，以空格隔開即可，但有幾個需要注意的點：

• 如果需要設(shè)定背景尺寸，寫法是<position>/<size>，必須設(shè)定 的同時，以 / 分隔 和 。
• background-clip和background-origin的屬性，如果只寫了一個值，那么會同時應(yīng)用在兩個屬性上，如果寫了兩個值，那么前者是background-origin，而后者是background-clip
• 沒有設(shè)置的會被設(shè)為默認值，之后也可以單獨設(shè)置，這個和padding之類簡寫的方式相似。

合體戰(zhàn)士之多重背景

從CSS3時代開始，CSS背景開始支持多個背景圖，設(shè)置在一起了。

只要將每張背景圖以逗號分開，那么瀏覽器就會依次加載，并把寫在后面的疊在上面。

對于分開設(shè)置的背景屬性，也可以以逗號分隔，分別設(shè)置。但是如果，你只想設(shè)置其中某一張圖片的特定屬性，那你就得把其他的也都寫上才行…

以及，背景顏色是唯一的（攤手），在使用background簡寫的時候，背景顏色要設(shè)置在最后一個逗號之后。

還有什么？

還有，在去年最新的Compositing and Blending草案中，提出了混合模式的規(guī)范草案，涉及到背景的屬性是background-blend-mode，于本文成文時，只有Chrome和FF兩大瀏覽器支持這一屬性。

如果各位有玩過Photoshop的話，應(yīng)該會對Photoshop中的混合模式有所耳聞，二者意思差不多。background-blend-mode的可選參數(shù)包括：normal（普通），multiply（正片疊底），screen（濾色），overlay（疊加），darken（變暗），lighten（變亮），color-dodge（顏色減淡），color-burn（顏色加深），hard-light（強光），soft-light（柔光），difference（差值），exclusion（排除），hue（色相），saturation（飽和度），color（顏色），luminosity（明度）。

這些參數(shù)的中文都是我根據(jù)Photoshop的混合模式直接翻譯過來的（繁體用戶可以參考這里），規(guī)范草案中也給出了每種混合模式的算法和演示效果，因為時間問題我就不一一驗證效果了，如果有出入均以實際效果為準。MDN上有實際演示的Demo，我前面提到的那個網(wǎng)站也有很多實際的展示。

當然這些混合模式也可以應(yīng)用在其他圖像（比如SVG）上，我覺得這完全是為了讓那些設(shè)計師和前端工程師之間少一些爭吵多一些真誠（攤手）。

參考資料

1. MDN相關(guān)頁面：除了上面說的，還有能否應(yīng)用于 CSS 動畫，以及兼容性的相關(guān)資料。
2. W3C規(guī)范：原始規(guī)范文檔

【技多不壓身的設(shè)計師才有高薪資！】

1. 平面設(shè)計：《超贊！設(shè)計師完全自學指南》
2. 交互設(shè)計：《交互設(shè)計師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計師》
3. UI設(shè)計：《超實用新手指南！零基礎(chǔ)如何自學UI設(shè)計？》
4. 前端開發(fā)：《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學習前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識學起來！為設(shè)計師量身打造的DPI指南》
8. 交互設(shè)計自學路徑圖：《零基礎(chǔ)入門！給非科班生的自學路徑圖之交互設(shè)計篇》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學習平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量130萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com