新聞中心
background-size, background-origin, background-clip, 和background-position的多值設(shè)置,增強(qiáng)了背景控制的靈活性。淺談CSS3中新增的背景屬性

簡陽網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),簡陽網(wǎng)站設(shè)計制作,有大型網(wǎng)站制作公司豐富經(jīng)驗。已為簡陽1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢,請找那個售后服務(wù)好的簡陽做網(wǎng)站的公司定做!
在CSS3中,新增了許多背景屬性,這些屬性使得我們能夠更加靈活和方便地控制網(wǎng)頁元素的背景,下面我們將詳細(xì)介紹這些新增的背景屬性。
1. 背景圖片大小調(diào)整(backgroundsize)
通過backgroundsize屬性,我們可以調(diào)整背景圖片的大小,這個屬性有以下幾個值:
length:設(shè)置背景圖片的寬度和高度。
%:設(shè)置背景圖片相對于父元素的寬度和高度的百分比。
cover:保持背景圖片的寬高比,使其完全覆蓋容器。
contain:保持背景圖片的寬高比,使其被容器完全包含。
backgroundsize: 100px 200px; backgroundsize: 50% 100%; backgroundsize: cover; backgroundsize: contain;
2. 背景圖片定位(backgroundorigin)
通過backgroundorigin屬性,我們可以調(diào)整背景圖片的定位,這個屬性有以下幾個值:
paddingbox:背景圖片相對于元素的內(nèi)邊距框定位。
borderbox:背景圖片相對于元素的邊框盒定位。
contentbox:背景圖片相對于元素的內(nèi)容框定位。
backgroundorigin: paddingbox; backgroundorigin: borderbox; backgroundorigin: contentbox;
3. 背景圖片裁剪(backgroundclip)
通過backgroundclip屬性,我們可以裁剪背景圖片,這個屬性有以下幾個值:
borderbox:背景圖片會被裁剪到邊框盒。
paddingbox:背景圖片會被裁剪到內(nèi)邊距框。
contentbox:背景圖片會被裁剪到內(nèi)容框。
text:背景圖片只會顯示在文本下方。
backgroundclip: borderbox; backgroundclip: paddingbox; backgroundclip: contentbox; backgroundclip: text;
4. 多重背景(background)
通過background屬性,我們可以為元素添加多重背景,這個屬性可以同時設(shè)置多個背景圖片、顏色、重復(fù)方式等。
background: url(image1.jpg) norepeat, url(image2.jpg) repeatx, red;
歸納一下,CSS3中新增的背景屬性為我們提供了更多的選擇和靈活性,使得我們能夠更好地控制網(wǎng)頁元素的背景。
網(wǎng)站標(biāo)題:淺談CSS3中新增的背景屬性(淺談css3中新增的背景屬性是什么)
文章源于:http://www.dlmjj.cn/article/ccidsch.html


咨詢
建站咨詢
