• background-image
• background-repeat
• background-position
• background-size
• background-clip

最近在百度前端學院上學習，仿著別人做了一個鼠標模糊效果趟薄，其中涉及到background的一些內(nèi)容咧织，所以想自己做一下整理椒袍。

background-image

background-image是CSS中用來為元素設置背景圖像的，背景占據(jù)了元素的全部尺寸，包括了內(nèi)邊距和邊框诞仓。
background-image是有多個值設置.

• none:無背景圖
• url:使用地址路徑指向背景圖像
• linear-gradient:使用線性漸變創(chuàng)建背景圖像
• radial-gradient:使用徑向(放射性)漸變創(chuàng)建背景圖像
• repeating-linear-gradient:使用重復的線性漸變創(chuàng)建背景圖像
• repeating-radial-gradient：使用重復的徑向(放射性)漸變創(chuàng)建背景圖像蛇损。

- linear-gradient

linear-gradient線性漸變赁温，背景圖像沿著一個方向進行漸變。
linear-gradient怎么使用呢淤齐？

語法：
liner-gradient([<angle> || <point>,]? <color-stop>, <color-stop> [, <color-stop>]*)

angle或者point指的是線性漸變的方向股囊，color是漸變的顏色，最少為兩個,為起點和終點顏色更啄。
當沒有給color-stop指定位置稚疹，則根據(jù)顏色數(shù)量平均分配
指定位置應在`color的后面，如 red 20%, blue 60%, green 100%.

例子1:

background: -webkit-linear-gradient(top, #ace, #f96);
background: -webkit-linear-gradient(left, #ace, #f96, #ace);

解釋：top指定是一開始的方位祭务，從上向下進行顏色漸變内狗。同理left指的的從左向右進行顏色漸變怪嫌。

漸變圖片

例子2：

background: -webkit-linear-gradient(45deg, #ace, #f96);

解釋：指定的角度它是一個由水平線與漸變線產(chǎn)生的的角度，逆時針方向柳沙。因此岩灭，使用0deg將產(chǎn)生一個左到右橫向梯度，而90度將創(chuàng)建一個從底部到頂部的垂直漸變偎行。

漸變圖片

例子3：
background-image: -webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(1.jpg);

解釋：可以用顏色漸變和背景圖片結合一起川背，這里顯示效果相當于背景圖片上有一層透明效果。

漸變圖片

引申-可以同時有多個背景圖像同時在元素中展示出來蛤袒，使用

background-image: url(1.jpg), url(2.jpg);

多個url之間使用逗號隔開

background-repeat

background-repeat屬性規(guī)定是否及如何重復背景圖像(平鋪模式)熄云，默認地，背景圖像在水平和垂直方向上重復妙真。
background-repeat有多個值設置

• repeat:默認缴允，背景圖像在水平和垂直方向上重復。
• repeat-x: 背景圖像在水平方向上重復
• repeat-y: 背景圖像在垂直方向上重復
• no-repeat: 背景圖像不重復珍德，就顯示一次
• inherit: 背景圖像從父元素繼承該值的屬性值

background-position

background-position屬性規(guī)定了背景圖像的相對起始位置练般，它的取值可以是特殊字符值(top|left|right|bottom)，百分比(%)和長度單位(px,em...)

可以設置兩個值锈候，第一個是水平位置薄料，第二個是垂直位置。如果只規(guī)定了第一個值泵琳，那么第二個自動設置為50%|center摄职。

• 長度單位

它是以圖片的左上角為基準計算其相對位置的。

怎么說呢获列？背景圖片將要放置的地方作為一個坐標系谷市，左上角為坐標原點。向右向下為x击孩、y軸正方向迫悠。

如果設置background-position: 50px 50px,則圖片的左上角在坐標系上的(50,50)處，以該點為起始點放置圖片巩梢。

• 百分比

它是以圖片的中心點為基準計算其相對位置的,但是其中心點又是不斷在變的创泄。

什么意思？比如設置background-position: 50% 20%,則圖片的中心點為(50%,20%),這個點與坐標系的(50%,20%)相對應放置圖片括蝠。

圖片的左上角為0%验烧，0%;右下角為100%, 100%。

• 特殊字符值

可以設置為 top left right center這些值又跛，當兩個值都出現(xiàn)的時候碍拆，是以跟百分比一樣的方式計算相對位置的。

在W3C中給出這樣的例子

top left and left top Same as ‘0% 0%’.

top, top center, and center top Same as ‘50% 0%’.

right top and top right Same as ‘100% 0%’.

left, left center, and center left Same as ‘0% 50%’.

center and center center Same as ‘50% 50%’.

right, right center, and center right Same as ‘100% 50%’.

bottom left and left bottom Same as ‘0% 100%’.

bottom, bottom center, and center bottom Same as ‘50% 100%’.

bottom right and right bottom Same as ‘100% 100%’.

background-size

background-size設置了背景圖片的原始高度和寬度。
它可以取值為像素值感混，百分比或者其他字符段端幼。
當background-size取值為number和percentage時可以設置兩個值，也可以設置一個值弧满，當只取一個值時婆跑，第二個值相當于auto，但這里的auto并不會使背景圖片的高度保持自己原始高度庭呜，而會與第一個值相同滑进。

• auto 此值為默認值，保持了背景圖片的原始高度和寬度
• number 設置為具體的值募谎。
• percentage 此值為百分值扶关，可以是0%?100%之間任何值，但此值只能應用在塊元素上数冬，所設置百分值將使用背景圖片大小根據(jù)所在元素的寬度的百分比來計算节槐。
• cover 此值是將圖片放大，以適合鋪滿整個容器拐纱，這個主要運用在铜异，當圖片小于容器時，又無法使用background-repeat來實現(xiàn)時秸架，我們就可以采用cover;將背景圖片放大到適合容器的大小揍庄，但這種方法會使用背景圖片失真;
• contain 此值剛好與cover相反，其主要是將背景圖片縮小东抹，以適合鋪滿整個容器币绩，這個主要運用在，當背景圖片大于元素容器時府阀，而又需要將背景圖片全部顯示出來，此時我們就可以使用contain將圖片縮小到適合容器大小為止芽突，這種方法同樣會使用圖片失真试浙。

background-clip

background-clip是進行背景裁剪，將超出區(qū)域外的背景給剪掉
它可以有多個值設置寞蚌。

• border-box: 此值為默認值田巴，背景從border區(qū)域向外裁剪，也就是超出部分將被裁剪掉;
• padding-box:背景從padding區(qū)域向外裁剪挟秤，超過padding區(qū)域的背景將被裁剪掉;
• content-box: 背景從content區(qū)域向外裁剪壹哺，超過context區(qū)域的背景將被裁剪掉;
• text: 文本裁剪，超出文本的背景將被裁剪掉
• no-clip: 背景從border區(qū)域向外裁剪背景艘刚。