現(xiàn)在的手機(jī)已經(jīng)成為我們生活中不可或缺的一部分，隨著互聯(lián)網(wǎng)的發(fā)展，手機(jī)應(yīng)用日益豐富，網(wǎng)頁(yè)設(shè)計(jì)也越來(lái)越重要，其中，圖片背景效果是實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)中常用的一種技術(shù)，而使用CSS3制作圖片背景效果則非常簡(jiǎn)單，下面就來(lái)介紹一下。

background-image: url(圖片URL);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;

上面的代碼主要是針對(duì)圖片背景效果部分，下面分別舉例說(shuō)明：

background-image: url('圖片URL');

這里需要寫入需要使用的圖片URL地址，可以是在線圖片地址，也可以是相對(duì)地址，一般情況下建議采用相對(duì)地址。

background-size: cover;

此處的background-size屬性的值可以設(shè)置為： auto、length、cover、contain，默認(rèn)值為auto，而cover的意思是：盡量將背景圖片放大展示，直到鋪滿整個(gè)背景區(qū)域，也就是說(shuō)，無(wú)論原圖大小，都可以完美展示。

background-repeat: no-repeat;

重復(fù)部分主要是針對(duì)連續(xù)的背景，一般情況下建議設(shè)置為no-repeat，否則當(dāng)圖像不足時(shí)會(huì)出現(xiàn)“鑲嵌”的情況。

background-position: center center;

此處設(shè)置的是背景圖片的位置，由于一般情況下背景圖片大于背景區(qū)域，所以我們需要根據(jù)客戶端的顯示結(jié)果來(lái)決定如何顯示，這里的center center就是將圖片的中心對(duì)齊到背景區(qū)域的中心。

經(jīng)過(guò)上述的代碼設(shè)置，我們就可以實(shí)現(xiàn)一張完美的圖片背景效果，不同的是每個(gè)效果的背景圖片大小、重復(fù)部分、位置都存在一定差異。