|
CSS3 中的背景
CSS3 中的背景有較多改進。最顯著的是多背景圖片的選項，同時也增加了4個新屬性。
多背景
CSS3 中，可以對一個元素應(yīng)用一個或多個圖片作為背景。代碼和 css2 中的一樣，只需要用逗號來區(qū)別各個圖片。第一個聲明的圖片定位在元素頂部，其它的圖片按序在其下排列，例如：
background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);
新屬性：背景修剪(background-clip)
這又把我們帶回了文章開始討論的那個關(guān)于邊框內(nèi)圖片顯示的話題。它被描述為“背景描繪區(qū)”。
background-clip 屬性用來增強背景顯示位置的控制能力�？赡艿闹禐椋�
- background-clip: border-box;
背景顯示在邊框內(nèi)。
- background-clip: padding-box;
背景顯示在內(nèi)補白(padding)內(nèi)，而不是邊框內(nèi)。
- background-clip: content-box;
只在內(nèi)容內(nèi)顯示背景，而不是內(nèi)補白(padding)和邊框內(nèi)。
- background-clip: no-clip;
默認值，和 border-box 一樣。
新屬性：背景原點(background-origin)
這個屬性和 background-position 結(jié)合起來使用�？梢詮倪吙�，內(nèi)補白或者內(nèi)容盒子開始計算 background-position (類似于 background-clip)。
- background-origin: border-box;
以邊框為原點開始計算 background-position.
- background-origin: padding-box;
以內(nèi)補白為原點開始計算 background-position
- background-origin: content-box;
以內(nèi)容盒子為原點開始計算 background-position
對于 background-clip 和 background-origin 不同的一個解釋參看 CSS3.info
新屬性： 背景尺寸(background-size)
background-size 用來調(diào)整背景圖的大小。有好幾個可能值：
- background-size: contain;
縮小圖片來適應(yīng)元素的尺寸(保持像素的長寬比)
- background-size: cover;
擴展圖片來填滿元素(保持像素的長寬比)
- background-size: 100px 100px;
調(diào)整圖片到指定大小
- background-size: 50% 100%;
調(diào)整圖片到指定大小。百分比是相對于包含元素的尺寸的。
可以看一下 CSS3規(guī)則 網(wǎng)站上的幾個例子。
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 CSS背景全攻略 [4] 下一頁 CSS背景全攻略 [6]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 5 頁 CSS背景全攻略 [5]
