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

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


咨詢(xún)
建站咨詢(xún)
