深入常用CSS聲明(一) —— Background

05-11

一直對一些自己常用的css聲明掌握得不是很全，只知道常用的一些屬性和值，但是對於其他的用法確實一知半解，這篇文章旨在掃盲，先不說有多深的理解，至少做到能夠看到這些聲明的屬性和值的時候做到不陌生。

這裡後續還會增加更多自己在工作和學習中的一些css聲明，供自己查閱，也提供給大家看看。

github

background-image

用於指定一個容器的背景圖片，主要的值有三個：

none 無背景圖片(默認)
url(/* image path */) 指定的圖片地址
inherit 繼承自父容器

當背景圖片默認不設置的時候，默認值為none，表示沒有背景圖片。如果設置了背景圖而不可用時，同時又設置了背景色，那麼背景色可以代替。

當背景圖片通過url來指定值的時候，該容器的背景圖就會被設置為指定的圖片地址。背景圖可以設置多張，用background-image: url<path1>, url<path2>,…的形式，同樣還可以有多種形式：例如：Gradients（漸變）、SVG images(SVG圖片)、element等等。背景圖採用z軸層疊的方式，最先指定的圖片會在之後指定的圖片上被繪製。例如：

<style> .container { background-image: url(../static/images/nobody.png), url(../static/images/circus.png); }</style><div class="container"></div>

你會發現第一張圖片會在第二張圖片之上。另外，如果指定了背景顏色，那麼背景顏色會在background-color之下被繪製，看下面這張效果圖：

總的層疊關係如下簡圖所示：

當背景圖片設置為inherit時，表示繼承自父容器的背景圖片。如果父容器沒有設置背景圖片，默認為none。例如下面的代碼示例：

右下角絕對定位一個容器，背景圖片繼承自container，左上角默認定位若干個嵌套的容器，在最底層設置背景圖片繼承自父容器。效果圖如下：

可以看到，右下角繼承了父容器container的背景圖片，而左上角什麼也沒有。因為最底層的容器背景圖片設置為inherit，當時上層容器un-image-wrapper中並沒有設置任何背景圖片，因此繼承屬性默認為none。因此得出的結論是：背景圖片繼承只能是繼承自和自己最近的父容器設置的背景圖，這點和字體繼承(可看我在wrapper1中設置的字體顏色分別應用到了下層的子元素中)略有差別。

如果我將wrapper2的background-color: inherit;聲明代碼注釋打開的話，那麼在wrapper2和child中都會應用到wrapper1中所設置的背景顏色，這點和background-image道理相同。

background-origin

指定了背景圖片原點相對於背景容器的位置，默認值為padding-box，表示和padding區域的原點對齊

border-box 背景圖片會和容器的border原點對齊。
padding-box 背景圖片會和容器的padding區域的原點對齊
content-box 背景圖片會和容器的內容區域原點對齊

在background-attachment:fixed下會沒有作用，因為此時的圖片容器是相對於當前窗口了，最好的辦法就是實踐一下，就可以知道差別了：

通過一個select來改變origin的值，通過一個展示區域顯示圖片

代碼請戳這裡: https://codepen.io/rynxiao/pen/eymqpP

background-attachment

決定背景是在視口中固定的還是隨包含它的區塊滾動

fixed 背景圖片相對於當前視口
scroll 背景圖片相對於圖片容器滾動，不隨內容滾動
local 如果容器內容有滾動情況，背景圖片相對於內容滾動，而與包含它的容器無關

這其中要理解的可能就是scroll和local的區別。

簡單來說就是包含它的容器有沒有設置固定尺寸，如果沒有固定尺寸，那麼內容區域和容器區域其實是相同的，這樣scroll和local的表現其實相同；如果容器設置了一定的高度，此時內容出現了滾動條，然後我們在底部設置了一張背景圖，那麼再通過設置background-attachment的為scroll和local的時候，差異就出來了：

同樣通過設置一個select來改變background-attachment的值，可以觀察到圖片的表現狀態：

當設置為scroll的時候，圖片會固定在容器的下方，而設置為local的時候，圖片會固定在內容的下方，需要滑動一定的距離才能看得見圖片。

代碼請戳這裡：https://codepen.io/rynxiao/pen/baNXxM

background-clip

MDN上說的是背景色是否能夠延伸到邊框下面，其實簡單的理解就是：背景的裁剪區域。這點在MDN上面的一個例子已經很清楚地解釋了這點。

border-box 背景色以邊框為邊界開始裁剪
padding-box 背景色以padding區域開始裁剪
content-box 背景色以內容區域開始裁剪(這點其實在我們工作中經常會被用到)

默認的屬性的值為border-box。這裡重點說一下content-box（至少我工作中用到了??）,比如你設置了一個容器的內邊距值，但是你只希望內容區域有背景色的時候，就可以使用這個屬性，而沒有必要將padding改為margin。因為margin可能會引起上邊距摺疊的問題

代碼請戳這裡：https://codepen.io/rynxiao/pen/KZpPgj

background-position

定義了背景圖片相對於容器的位置，可取的值主要有以下幾種：

一個固定的值(left, right, top, bottom)
兩個固定的值(x: left, right, y: top, bottom)
兩個值，一個固定，一個為數值(具體像素，或者百分比)
兩個值，都為數值(具體像素，或者百分比)

如果只有一個值的情況下：如果設置了left或者right，表示背景圖片距離容器水平的距離，豎直方向為容器的50%。與background-position: 0/100% 50%;同一效果。同理，如果只設置了top或者bottom，則與background-position: 50% 0/100%;同一效果。

如果設置為兩個值的情況下，第一個表示水平方向的定位，第二個表示豎直方向的定位：

兩個都是固定值，這點按照字面意義理解就好
一個固定，一個為具體數值，數值如果為具體值：代表具體的定位，如果為百分比，則計算為(容器的高度/寬度 * xx%)得到的換算值。
兩個都為數值，參看上一條

最好的理解方式是：把所有的值的種類的理解為具體的值的換算。

比如，容器的寬高為 400 x 300

background-position:top -> 0 (200 - 20)px30% 50% -> (400 - 20) * 30%px (300 - 20) * 50%pxtop 40% -> 0 (300 - 20) * 40%px30px bottom -> 30px 0center -> (400 - 20) * 50%px (300 - 20) * 50%px// 而如果圖片尺寸大於容器尺寸時，算術依然成立// 例如尺寸為：700 x 400center -> (400 - 700) * 50%px (300 - 400) * 50%px -> -150px -50px

position最大的應用為早期製作精靈/雪碧圖。例如CSDN中如此應用：

.sprite-imgs .link_comments { background-image: url(../images/skin-type-icon-yellow.png); background-repeat: no-repeat; background-position: 0 -43px; padding-left: 17px;}

順便畫了一個非常拙劣的圖

代碼請戳這裡：https://codepen.io/rynxiao/pen/ZvGzyb

background-repeat

定義了背景圖片的平鋪方式，默認x軸和y軸都平鋪

repeat-x x軸方向上平鋪，圖片可能顯示不完全
repeat-y y軸方向上平鋪，圖片可能顯示不完全
repeat x軸、y軸方向上平鋪，圖片可能顯示不完全
space 圖片x軸、y軸方向上平鋪，但是保證圖片會顯示完全
round 圖片x軸、y軸方向上平鋪，若剩餘的空間大於圖片的一半尺寸，則加入一個新的圖片，尺寸需另外計算
no-repeat 圖片x軸、y軸方向上不平鋪

以上幾個屬性都比較好理解，這裡重點說一下round。圖片以自身尺寸平鋪的方式進行，如果平鋪到最後發現剩餘空間的尺寸已經不足容納一個完整的圖片，這裡就需要計算：

if (剩餘空間 > 圖片尺寸 / 2 ) { // 添加一個新的圖片 addANewImage() } // 重新計算圖片尺寸，直到能容納一個新的圖片為止(會被壓縮/拉伸) reCaculateImageWidth()

一個簡單的例子：如果我的容器尺寸為：224 x 224，圖片的尺寸為：28 x 28，那麼在水平方向上剛好可以放下8個圖片。而當我把容器尺寸改為：238 x 224時，會發現水平方向出現了9個星星，圖片被縮小；而改為237 x 224的時候，依然是8個星星，但是圖片被放大。

代碼請戳這裡：https://codepen.io/rynxiao/pen/opXLaO

background-size

指定了背景圖片的尺寸，可取屬性有如下幾個：

一個固定的值：contain/cover/auto
一個固定值auto，一個具體數值
兩個具體的數值

圖片自身屬性：

點陣圖：例如jpeg,一般具有自身尺寸和自身比例矢量圖：例如svg,一般不需要自身尺寸和自身比例。如果有，那麼一定是既有自身尺寸，又有自身比例css漸變圖：沒有自身尺寸和比例element: 擁有element元素的尺寸和比例

針對以上圖片屬性，我們平時針對最多的就是點陣圖，因此只需要記住點陣圖對應的規則就可以了，剩餘的忘記了可以回頭來查。

一個固定值：

contain: 最大限度填充背景區域，但是不能被裁剪，因此例子中的圖片會適應高度放大cover: 填滿背景容器區域，圖片可以被裁剪，因此例子中的圖片會適應寬度放大auto: 如果圖片有自身尺寸，則按照自身尺寸展示，可以看到下面的例子中圖片不會撐滿容器如果圖片沒有自身尺寸並且沒有自身比例，那麼圖片會填充整個背景容器，圖片可能會被拉伸變形如果圖片沒有自身尺寸，但是有自身比例，那麼按照contain來展示圖片如果圖片只有一個尺寸，並且有自身比例，那麼另一個尺寸會通過比例計算出來如果圖片只有一個尺寸，沒有自身比例，那麼另一個尺寸就是圖片容器的尺寸

一個固定值auto，另一個具體數值：

根據自身比例來，如果存在自身比例，那麼為auto的值會根據給定的值來計算，如果沒有自身比例，那麼另一個值為圖片容器尺寸
若值為百分比，那麼會根據圖片容器尺寸先折算成具體尺寸，然後再根據比例計算另一邊的尺寸
如果backgound-attachment為fixed時，圖片容器尺寸為當前視圖窗口

兩個具體數值：

按照具體給定的尺寸顯示，參看上面解釋
圖片可能會被拉伸

下面是一個實際的例子截圖：

代碼請戳這裡：https://codepen.io/rynxiao/pen/PEwLxN

總結

查看API是一件非常無聊的事情，加上自己的一些想法和理解會使這件本來無趣的事情會變得有趣很多，查看的同時還需注意實踐，萬一有天不清楚了，能夠看一下自己的demo，也能一下子就能明白過來，這裡貼出來共勉。