CSS屬性：背景屬性（圖文詳解）
本文最初發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關註我，一起入門和進階前端。
以下是正文。
background系列屬性
常見背景屬性
CSS樣式中，常見的背景屬性有以下幾種：（經常用到，要記住）
background-color:#ff99ff;設置元素的背景顏色。background-image:url(images/2.gif);將圖像設置為背景。background-repeat: no-repeat;設置背景圖片是否重復及如何重復，默認平鋪滿。（重要）no-repeat不要平鋪；repeat-x橫向平鋪；repeat-y縱向平鋪。
background-position:center top;設置背景圖片在當前容器中的位置。background-attachment:scroll;設置背景圖片是否跟著滾動條一起移動。
屬性值可以是：scroll（背景圖片不動）、fixed（背景圖片跟著滾動條一起移動）。註意屬性值的含義不要搞反了，它的含義是根據滾動條來定義的。另外還有一個簡寫屬性叫做
background，它的作用是：將上面的多個屬性寫在一個聲明中。
上面這幾個屬性經常用到，需要記住。現在我們逐個進行講解。
background-color：背景顏色的表示方法
css2.1中，背景顏色的表示方法有三種：單詞、rgb表示法、十六進制表示法。
比如紅色可以有下面的三種表示方法：
background-color: red;
background-color: rgb(255,0,0);
background-color: #ff0000;下面分別介紹。
1、用英語單詞來表示：
能夠用英語單詞來表述的顏色，都是簡單顏色。比如紅色：
background-color: red;2、rgb表示法：
rgb表示三原色“紅”red、“綠”green、“藍”blue。
光學顯示器中，每個像素都是由三原色的發光原件組成的，靠明亮度不同調成不同的顏色的。r、g、b的值，每個值的取值範圍0~255，一共256個值。
比如紅色：
background-color: rgb(255,0,0);
黑色：
background-color: rgb(0,0,0);顏色可以疊加，比如黃色就是紅色和綠色的疊加：
background-color: rgb(255,255,0);3、十六進制表示法：
比如紅色：
background-color: #ff0000;PS:所有用#開頭的值，都是16進制的。
這裏，我們就要學會16進制與10進制之間的轉換。下面舉幾個例子。
問：16進制中28等於10進制多少？
答：2*16+8 = 40。
16進制中的af等於10進制多少？
答：10 * 16 + 15 = 175
所以，#ff0000就等於rgb(255,0,0)。
background-color: #123456;等價於background-color: rgb(18,52,86);
十六進制可以簡化為3位，所有#aabbcc的形式，能夠簡化為#abc。舉例如下：
比如：
background-color:#ff0000;等價於：
background-color:#f00;比如：
background-color:#112233;等價於：
background-color:#123;但是，比如下面這個是無法簡化的：
background-color:#222333;再比如，下面這個也是無法簡化的：
background-color:#123123;幾種常見的顏色簡寫可以記住。如下：
#000 黑
#fff 白
#f00 紅
#222 深灰
#333 灰
#ccc 淺灰background-repeat屬性（重要）
background-repeat:no-repeat;設置背景圖片是否重復及如何重復，默認平鋪滿。屬性值可以是：
no-repeat（不要平鋪）repeat-x（橫向平鋪）repeat-y（縱向平鋪）
這個屬性在開發的時候也是經常用到的。我們通過設置不同的屬性值來看一下效果吧：
（1）不加這個屬性時：（即默認時）（背景圖片會被平鋪滿）
PS：padding的區域也是有背景圖的。
（2）屬性值為no-repeat（不要平鋪）時：
（3）屬性值為repeat-x（橫向平鋪）時：
其實這種屬性的作用還是很廣的。舉個例子，設計師設計一張寬度只有1px、顏色縱向漸變的圖片，然後我們通過這個屬性將其進行水平方向的平鋪，就可以看到整個頁面都是漸變的了。
在搜索引擎上搜“平鋪背景”，就可以發現，周期性的圖片可以采用此種方法進行平鋪。
（4）屬性值為repeat-y（縱向平鋪）時：
background-position屬性
background-position屬性指的是背景定位屬性。公式如下：
在描述屬性值的時候，有兩種方式：用像素描述、用單詞描述。下面分別介紹。
1、用像素值描述屬性值：
格式如下：
background-position:向右偏移量 向下偏移量;屬性值可以是正數，也可以是負數。比如：100px 200px、-50px -120px。
舉例如下：
2、用單詞描述屬性值：
格式如下：
background-position: 描述左右的詞 描述上下的詞;- 描述左右的詞：left、center、right
- 描述上下的詞：top 、center、bottom
比如說，right center表示將圖片放到右邊的中間；center center表示將圖片放到正中間。
位置屬性有很多使用場景的。我們來舉兩個例子。
場景1：（大背景圖）
打開“暗黑3 臺灣”的官網https://tw.battle.net/d3/zh/，可以看到官網的效果是比較炫的：
檢查網頁後，找到網站背景圖片的url：https://tw.battle.net/d3/static/images/layout/bg-repeat.jpg。背景圖如下：
實際上，我們是通過把這張圖片作為網站的背景圖來達到顯示效果的。只需要給body標簽加如下屬性即可：
body{
background-image: url(/Users/smyhvae/Dropbox/img/20170812_1950.jpg);
background-repeat: no-repeat;
background-position: center top;
}上方代碼中，如果沒加background-position這個屬性，背景圖會默認處於瀏覽器的左上角（顯得很醜）；加了此屬性之後，圖片在水平方向就位於瀏覽器的中間了。
場景2：（通欄banner）
很多網站的首頁都會有banner圖（網站最上方的全屏大圖叫做「通欄banner」），這種圖要求橫向的寬度特別大。比如說，設計師給你一張1920*465的超大banner圖，如果我們把這個banner圖作為img標簽直接插入網頁中，會有問題的：首先，圖片不在網頁的中間；其次，肯定會出現橫向滾動條。如下圖所示：
正確的做法是，將banner圖作為div的背景圖，這樣的話，背景圖超出div的部分，會自動移溢出。需要給div設置的屬性如下：
div{
height: 465px;
background-image: url(http://img.smyhvae.com/20170813_1053.jpg);
background-position: center top;
background-repeat: no-repeat;
}上方代碼中，我們給div設置height（高度為banner圖的高度），不需要設置寬度（因為寬度會自動霸占整行）。效果如下：
上圖可以看出，將banner圖作為div的背景後，banner圖會永遠處於網頁的正中間（水平方向來看）。
background-attachment屬性
background-attachment:scroll;設置背景圖片是否固定。屬性值可以是：fixed（背景就會被固定住，不會被滾動條滾走）。scroll（與fixed屬性相反，默認屬性）
background-attachment:fixed;的效果如下：
background綜合屬性
background屬性和border一樣，是一個綜合屬性，可以將多個屬性寫在一起。(在盒子模型這篇文章中專門講到boder)
舉例1:
background:red url(1.jpg) no-repeat 100px 100px fixed;等價於：
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;以後，我們可以用小屬性層疊掉大屬性。
上面的屬性中，可以任意省略其中的一部分。
比如說，對於下面這樣的屬性：
background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;效果如下：
PS：以後的CSS3內容中，我們會接觸到更多的background屬性： background-origin、background-clip、background-size（在CSS2.1背景圖片是不能調整尺寸，IE9開始兼容）、多背景。
我的公眾號
想學習代碼之外的軟技能？不妨關註我的微信公眾號：生命團隊（id：vitateam）。
掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：
CSS屬性：背景屬性（圖文詳解）