DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 8.6 本章總結
8.6 本章總結
編輯:CSS3基礎     

在CSS3中,為了滿足更多需求,新增了多個新的背景屬性,它們提供了對背景更強大的控制。

CSS3新增的背景屬性 屬性值 說明 background-size 背景大小 background-origin 背景位置 background-clip 背景裁切

除了上述背景屬性,CSS3還增加了多背景圖片。

一、背景大小background-size

在CSS3中,我們可以使用background-size屬性來設置背景圖片的大小。

語法:

background-size:取值;

說明:

background-size取值共有2種,一種是使用長度值(如px、百分比);另外一種是使用關鍵字。

background-size關鍵字取值如下表:

background-size關鍵字取值 關鍵字 說明 cover 即“覆蓋”,將背景圖片以等比縮放來填充整個容器元素 contain 即“容納”,將背景圖片等比縮放至某一邊緊貼容器邊緣為止

使用background-size屬性可以實現自適應元素大小的背景圖片。

二、背景位置background-origin

在CSS3中,我們可以使用background-origin屬性來設置元素背景圖片平鋪的最開始位置。

語法:

background-origin:屬性值;

說明:

background-origin屬性取值如下:

background-origin屬性取值 屬性值 說明 border-box 表示背景圖片是從邊框開始平鋪 padding-box 表示背景圖片是從內邊距開始平鋪(默認值) content-box 表示背景圖片是從內容區域開始平鋪

background-origin屬性往往都是配合background-position屬性 來使用,其中background-origin屬性規定background-position屬性相對於什麼位置來定位。

三、背景剪切background-clip

在CSS3中,使用background-clip屬性來將背景圖片根據實際需要進行剪切。

語法:

background-clip:屬性值;

說明:

background-clip屬性取值如下表:

background-clip屬性取值 屬性值 說明 border-box 默認值,表示從邊框border開始剪切 padding-box 表示從內邊距padding開始剪切 content-box 表示從內容區域content開始剪切

background-clip屬性指定了背景在哪些區域可以顯示,但與背景開始繪制的位置(即background-origin屬性)無關。背景繪制的位置可以出現在不顯示背景的區域。這就相當於背景圖片被不顯示背景的區域裁剪了一部分一樣。

background-clip屬性與background-origin屬性取值一樣,但是本質卻不一樣。

四、CSS3多背景圖片

在CSS3中,我們可以輕松實現多背景圖片。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved