background 給元素添加背景屬性, 是一個簡寫屬性, 在一個聲明中設置所有的背景屬性。

簡寫

div { 
  background: skyblue url(bgimage.gif) no-repeat fixed top;
  }

所有瀏覽器都支持 background 屬性 且不可繼承。

IE8 以及以下的瀏覽器不支持一個元素多設置個背景圖像。

可以設置如下屬性：

background-color           //設置元素的背景色。
background-repeat          //設置背景圖像是否平鋪
background-attachment      //背景圖像是否固定或者隨著頁面的其余部分滾動。
 

background-image           //設置背景圖像。
background-origin          //設置背景圖片的定位區域。
background-clip            //設置背景的繪制區域。
background-position        //設置背景圖像的位置。
background-size            //設置背景圖片的尺寸。

background-color

元素的背景顏色取值和 color 類似

可以用以 # 開頭的16進制顏色碼 #FFB6C1 表示 也可用英文顏色單詞關鍵字 red black 表示 還個用 CSS3中的新特性 rgba(255,255,0) 來表示 ;

如:

div {
  background:#FFF;   
}

background-image

要把圖像放入背景，屬性的默認值是 none，表示背景上沒有放置任何圖像。

如果需要設置一個背景圖像，必須為這個屬性設置一個 URL 值：

如:

div { 
background-image: url("圖像的路徑"); // ./ 為當前路徑    ./../為上一層路徑 
}

background-position

背景圖像的位置 有兩個參數 第一個參數為橫軸X ,第二個參數為 縱軸Y

提供以下3類取值:

1. 關鍵字: top、bottom、left、right 和 center。
2. 長度值: 100px, 5cm,1 rem,1pt 等。
3. 使用百分數值 :50% ,20% 等。

關鍵字

通常成對出現 默認為 left top ;

如:

div
  { 
　　background-image:url("ssss");
    background-repeat:no-repeat;
    background-position:right bottom; //使圖像放置在元素內邊距區的右下角。 如果只寫一個參數, 那麽第二個參數默認為center。
  }

長度值

元素內邊距區左上角的偏移,偏移點是圖像的左上角。

如:

div
  { 
　　background-image:url("ssss");
    background-repeat:no-repeat;
    background-position:right bottom; //圖像的左上角將在元素內邊距區左上角向右 100 像素、向下 100 像素的位置上。

}

百分數值

適當放置圖像

如:

body
  { 
    background-image:url(‘ssss‘);
    background-repeat:no-repeat;
    background-position:50% 50%; //使圖像中心點和元素中心點對齊居中 如果只寫一個參數,那麽第二個參數默認 50%

 }

background-repeat

在頁面上對背景圖像進行平鋪

提供有以下4種值:

1. repeat-x :圖像只在水平方向上重復
2. repeat-y :圖像只在垂直方向上重復
3. no-repeat: 不允許圖像在任何方向上平鋪
4. 默認任何方向上平鋪

如:

div
  { 
  background-image: url("sss");
  background-repeat: repeat-x; //圖像只在水平方向平鋪
  }

background-attachment

只提供2種值:

屬性的默認值是 scroll，在默認的情況下，背景會隨文檔滾動。

fixed 防止這種滾動,不會受到滾動的影響

如:

div
  {
  background-image:url("sss");
  background-repeat:no-repeat;
  background-attachment:fixed //固定圖像
  }

CSS3 背景新特性

background-size

設置背景圖像的高度和寬度 第一個參數為 圖像寬度,第二個為圖像高度 可能會使圖像拉伸變形。

提供以下四種取值:

1. 長度值: px , pt 等
2. 百分數值: 30% 30%
3. cover: 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域, 背景圖像的某些部分也許無法顯示在背景定位區域中 。
4. contain: 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域 。

如:

div
{
background-image:url("sss");
background-repeat:no-repeat;
background-size:cover; //完全覆蓋背景區域
}

background-origin

屬性規定 background-position 屬性相對於什麽位置來定位。

如果背景圖像的 background-attachment 屬性為 "fixed"，則該屬性沒有效果。

提供的值有:

1. padding-box :背景圖像相對於內邊距來定位。

2. border-box :背景圖像相對於邊框盒來定位。

3. content-box :背景圖像相對於內容來定位。
   

如:

div
{
padding:20px;
border:20px dotted red;
background-image:url("sss");
background-origin:padding-box; //相對於內邊距來定位
background-repeat:no-repeat;
}

background-clip

圖像裁剪區域

提供的值和origin 屬性類似 請參考 background-origin

可配合 size 和 position 屬性使用

CSS background 屬性