CSS之背景的填充范圍

1.資料：CSS2.1 進行了更正：元素的背景是內容、內邊距和邊框區的背景

 

2.也就是說背景顏色，background-color:這些會填充內邊距和邊框border, 而不會填充外邊框margin的部分

 

3.CSS背景圖片的填充范圍和填充位置

  3.1  如果不設置repeat屬性的話，默認會圖片重復的方式填充整個元素內容+padding部分(margin不包括)

  3.2  如果設置了background-position的話，比如 top right(右上) 也就是img會頂到右上角的padding最邊部

 

 

　　3.3 讓背景圖片居中，盡量用background-posintion:center，不要用百分比50% 50%

             PS:這會導致圖像適當放置，其中心與其元素的中心對齊。換句話說，百分數值同時應用於元素和圖像。也就是說，圖像中描述為 50% 50% 的點（中心點）與元素中描述為 50% 50% 的點（中心點）對齊。

       3.4 具體的調整背景圖片的位置，可以用position配合 具體的數值單位，比如px這些 （方法是第一個參數為 右，第二個為下）

 

比如，如果設置值為 50px 100px，圖像的左上角將在元素內邊距區左上角向右 50 像素、向下 100 像素的位置上：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

3.5 背景圖片和scroll滑動框的自適應

　　background-attachment:fixed