淺談CSS3中新增的背景屬性

簡陽網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),簡陽網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為簡陽1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的簡陽做網(wǎng)站的公司定做！

在CSS3中，新增了許多背景屬性，這些屬性使得我們能夠更加靈活和方便地控制網(wǎng)頁元素的背景，下面我們將詳細(xì)介紹這些新增的背景屬性。

1. 背景圖片大小調(diào)整（backgroundsize）

通過backgroundsize屬性，我們可以調(diào)整背景圖片的大小，這個(gè)屬性有以下幾個(gè)值：

length：設(shè)置背景圖片的寬度和高度。

%：設(shè)置背景圖片相對(duì)于父元素的寬度和高度的百分比。

cover：保持背景圖片的寬高比，使其完全覆蓋容器。

contain：保持背景圖片的寬高比，使其被容器完全包含。

backgroundsize: 100px 200px;
backgroundsize: 50% 100%;
backgroundsize: cover;
backgroundsize: contain;

2. 背景圖片定位（backgroundorigin）

通過backgroundorigin屬性，我們可以調(diào)整背景圖片的定位，這個(gè)屬性有以下幾個(gè)值：

paddingbox：背景圖片相對(duì)于元素的內(nèi)邊距框定位。

borderbox：背景圖片相對(duì)于元素的邊框盒定位。

contentbox：背景圖片相對(duì)于元素的內(nèi)容框定位。

backgroundorigin: paddingbox;
backgroundorigin: borderbox;
backgroundorigin: contentbox;

3. 背景圖片裁剪（backgroundclip）

通過backgroundclip屬性，我們可以裁剪背景圖片，這個(gè)屬性有以下幾個(gè)值：

borderbox：背景圖片會(huì)被裁剪到邊框盒。

paddingbox：背景圖片會(huì)被裁剪到內(nèi)邊距框。

contentbox：背景圖片會(huì)被裁剪到內(nèi)容框。

text：背景圖片只會(huì)顯示在文本下方。

backgroundclip: borderbox;
backgroundclip: paddingbox;
backgroundclip: contentbox;
backgroundclip: text;

4. 多重背景（background）

通過background屬性，我們可以為元素添加多重背景，這個(gè)屬性可以同時(shí)設(shè)置多個(gè)背景圖片、顏色、重復(fù)方式等。

background: url(image1.jpg) norepeat, url(image2.jpg) repeatx, red;

歸納一下，CSS3中新增的背景屬性為我們提供了更多的選擇和靈活性，使得我們能夠更好地控制網(wǎng)頁元素的背景。

網(wǎng)站題目：淺談CSS3中新增的背景屬性（淺談css3中新增的背景屬性是什么）
標(biāo)題路徑：http://uogjgqi.cn/article/ccidsch.html