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;

下面分別介紹。

一、用英語單詞來表示：

可以用英語單詞來表述的顏色，都是簡單顏色。好比紅色：

background-color: red;

二、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);

三、十六進制表示法：

好比紅色：

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屬性指的是背景定位屬性。公式以下：

在描述屬性值的時候，有兩種方式：用像素描述、用單詞描述。下面分別介紹。

一、用像素值描述屬性值：

格式以下：

background-position:向右偏移量 向下偏移量;

屬性值能夠是正數，也能夠是負數。好比：100px 200px、-50px -120px。

舉例以下：

二、用單詞描述屬性值：

格式以下：

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開始兼容）、多背景。

##個人公衆號

想學習<font color=#0000ff>代碼以外的軟技能</font>？不妨關注個人微信公衆號：生命團隊（id：vitateam）。

掃一掃，你將發現另外一個全新的世界，而這將是一場美麗的意外：