深入學習css之background屬性


 

css中允許應用純色作為背景,也允許使用圖片作為背景。

background一共有8個對應的屬性:

1、background-color:顏色值

用於設定背景的顏色

3種定義顏色的形式,

1 顏色關鍵字表示法,可直接用英文單詞來定義,比如redbluegreen等。

2 16進制表示法,用#000000#ffffff區間內的16進制數來表示。

3 三原色表示法,rgbrgb,其中r,g,b分別代表紅色,綠色,藍色,取值范圍為0255.

默認值:transparent

注意:

1.當同時定義了背景顏色和背景圖像時,背景圖像覆蓋在背景顏色之上。

2.如果設置了 <' background-image '>,同時也建議設置 <' background-color '> 用於當背景圖像不可見時保持與文本顏色有一定的對比度。

3.對應的腳本特性為backgroundColor

 

2、background-imageurl(“圖片路徑);

用於設定對象的背景圖片

默認值:none

注意:

如果定義了多組背景圖,且背景圖之間有重疊,寫在前面的將會蓋在寫在后面的圖像之上。

對應的腳本特性為backgroundImage

3background-repeat

設置或檢索對象的背景圖像如何鋪排填充。

取值:

repeat-x:背景圖像在橫向上平鋪

repeat-y:背景圖像在縱向上平鋪

repeat:背景圖像在橫向和縱向平鋪

no-repeat:背景圖像不平鋪

round背景圖像自動縮放直到適應且填充滿整個容器。(CSS3)

space背景圖像以相同的間距平鋪且填充滿整個容器或某個方向。(CSS3)

ie覽器還不支持以上兩個新屬性。

 

默認值:repeat

 

注意:

允許提供2個參數,如果提供全部2個參數,第1個用於橫向,第二個用於縱向。

如果只提供1個參數,則用於橫向和縱向。特殊值repeat-xrepeat-y除外,因為repeat-x相當於repeat no-repeatrepeat-y相當於no-repeat repeat,即其實repeat-xrepeat-y等價於提供了2個參數值 

對應的腳本特性為backgroundRepeat

 

4background-position

用於設置或檢索對象的背景圖像位置。

取值:

<percentage>用百分比指定背景圖像填充的位置。可以為負值。其參考的尺寸為容器大小減去背景圖片大小

<length>用長度值指定背景圖像填充的位置。可以為負值。

center:背景圖像橫向和縱向居中。

left:背景圖像在橫向上填充從左邊開始。

right:背景圖像在橫向上填充從右邊開始。

top:背景圖像在縱向上填充從頂部開始。

bottom:背景圖像在縱向上填充從底部開始

默認值:0% 0%,效果等同於left top

注意:

該屬性提供2個參數值CSS3中已允許提供34個值)

如果提供三或四個,每個<percentage><length>偏移前都必須跟着一個邊界關鍵字(即left | right | top | bottom,不包括center),偏移量相對關鍵字位置進行偏移。

示例:假設要定義背景圖像在容器中右下方,並且距離右邊和底部各有20px 

縮寫方式:

background:url(test1.jpg) no-repeat right 20px bottom 20px;

你也可以設置3個參數值: 

拆分方式:

background:url(test1.jpg) no-repeat left bottom 10px;

要注意的是:設置3個或4個值,偏移量前必須有關鍵字。也就是說,形如:"10px bottom 20px" ,這樣的參數設置是錯誤的,因為10px前面沒有關鍵字。

如果提供兩個,第一個用於橫坐標,第二個用於縱坐標。

如果只提供一個,該值將用於橫坐標;縱坐標將默認為50%(即center)。

對應的腳本特性為backgroundPosition

 

5、background-attachment

設置或檢索背景圖像是隨對象內容滾動還是固定的。

取值:

fixed:背景圖像相對於窗體固定。

scroll:背景圖像相對於元素固定,也就是說當元素內容滾動時背景圖像不會跟着滾動,因為背景圖像總是要跟着元素本身。但會隨元素的祖先元素或窗體一起滾動。

local背景圖像相對於元素內容固定,也就是說當元素隨元素滾動時背景圖像也會跟着滾動,因為背景圖像總是要跟着內容。(CSS3)

默認值:scroll

 

還有三個是css3中新加入的

6background-size

檢索或設置對象的背景圖像的尺寸大小。

取值:

<length>用長度值指定背景圖像大小。不允許負值。

<percentage>用百分比指定背景圖像大小。不允許負值。

auto:背景圖像的真實大小。

cover:將背景圖像等比縮放到完全覆蓋容器,背景圖像有可能超出容器。

contain:將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等,背景圖像始終被包含在容器內。

默認值auto

注意:

  • 該屬性提供2個參數值(特性值covercontain除外)
  • 如果提供兩個,第一個用於定義背景圖像的寬度,第二個用於定義背景圖像的高度。
  • 如果只提供一個,該值將用於定義背景圖像的寬度,第2個值默認為auto,即高度為auto,此時背景圖以提供的寬度作為參照來進行等比縮放。
  • 對應的腳本特性為backgroundSize
  1. 不支持寫入 <' background '> 縮寫方式。
  2. iOS6.1及更早cover值在body上有bug;同時background-size: cover; background-attachment: fixed;配合時也有bug

 

7、background-clip指定對象的背景圖像向外裁剪的區域。 

 

取值:

padding-box:padding區域(不含padding)開始向外裁剪背景。

border-box:border區域(不含border)開始向外裁剪背景。

content-box:content區域開始向外裁剪背景。

text:從前景內容的形狀(比如文字)作為裁剪區域向外裁剪,如此即可實現使用背景作為填充色之類的遮罩效果。遮罩效果

 

默認值:border-box

 

注意:

  1. text屬性值,目前為webkit only

   2.對應的腳本特性為backgroundClip

 

 8、background-origin

取值:

padding-box:padding區域(含padding)開始顯示背景圖像。

border-box:border區域(含border)開始顯示背景圖像。

content-box:content區域開始顯示背景圖像。

默認值padding-box

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM