Css3-background/impl

舉例來說，以下宣告整體：

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;

跟下面去除多餘取值（原上面的粗體部份）、補上 ‘background-origin’ 和 ‘background-repeat’不夠的取值（在下面用粗體顯示）後的宣告整體有同樣的效果：

background-image: url(flower.png), url(ball.png), url(grass1.png);
background-position: center center, 20% 80%, top left;
background-origin: border-box, content-box, border-box;
background-repeat: no-repeat, no-repeat, no-repeat;

例子：

h1 { background-color: #F00 } /* 設背景為紅色。 */

以下宣告給出後面說明（水平、垂直）的偏移（從左上角）：

background-position: left 10px top 15px;   /* 10px, 15px */
background-position: left      top     ;   /*  0px,  0px */
background-position:      10px     15px;   /* 10px, 15px */
background-position: left          15px;   /*  0px, 15px */
background-position:      10px top     ;   /* 10px,  0px */
background-position: left      top 15px;   /*  0px, 15px */
background-position: left 10px top     ;   /* 10px,  0px */

舉例來說，如果取值對是 ‘0% 0%’，背景圖像的左上角會跟盒的邊距盒（一般來說）的左上角對齊。取值對 ‘100% 100%’ 會將圖像的右下角放在區域的右下角。取值對 ‘75% 25%’ 會將圖像中從左往右 75% 從上往下 25% 的點放在區域中從左往右 75% 從上往下 25% 的點。

以下 ‘background’ 縮寫宣告使用的關鍵字把 ‘background-position’ 設為後面說明的百分比取值。

body { background: url("banner.jpeg") right top }    /* 100%   0% */
body { background: url("banner.jpeg") top center }   /*  50%   0% */
body { background: url("banner.jpeg") center }       /*  50%  50% */
body { background: url("banner.jpeg") bottom }       /*  50% 100% */

以下的範例會把（單一個）圖像放在視口的右下角。

body {
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

背景可以相對於不是左上角的角落定位。例：下面宣告將背景圖像放在底邊 10px 從右邊 3px 的位置：

background-position: right 3em bottom 10px

下面例子的第一個規則中，給定的只有一個 ‘background-color’ 而其他屬性會被設為初始值。第二個規則指定了所有屬性。

body { background: red }
p { background: url("chess.png") 40% / 10em gray
       round fixed border-box; }

第一個規則與下面同等：

body {

   background-color: red;
   background-position: 0% 0%;
   background-size: auto;
   background-repeat: repeat;
   background-clip: border-box;
   background-origin: padding-box;
   background-attachment: scroll;
   background-image: none }

第二個與下面同等：

p {
    background-color: gray;
    background-position: 40% 50%;
    background-size: 10em auto;
    background-repeat: round;
    background-clip: border-box;
    background-origin: border-box;
    background-attachment: fixed;
    background-image: url("chess.png") }

下面例子展示了同時設定底色（‘#CCC’）和背景圖像（‘url("mental.jpg"’）。使用者代理會放大圖像到跟元素寬度一致。

div { background: #CCC url("metal.jpg") top left / 100% auto no-repeat}

另一個展示同等性的例子：

div { background: padding-box url(paper.jpg) white center }
div {
    background-color: white;
    background-image: url(paper.jpg);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: center;
    background-clip: padding-box;
    background-origin: padding-box;
    background-size: auto }

以下具有逗號區隔的多個取值的宣告

background: url(a.png) top left no-repeat,
            url(b.png) center / 100% 100% no-repeat,
            url(c.png) white;

等同於

background-image:      url(a.png),  url(b.png),  url(c.png);
background-position:   0% 0%,       center,      0% 0%;
background-repeat:     no-repeat,   no-repeat,   repeat;
background-clip:       border-box,  border-box,  border-box;
background-origin:     padding-box, padding-box, padding-box;
background-size:       auto,        100% 100%,   auto;
background-attachment: scroll,      scroll,      scroll;
background-color:      white;

舉例來說，下面的第一個宣告等同於後面的五個宣告的集合：

p { border: solid red }
p {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red;
  border-image: none;
}

考慮這個範例：

blockquote {
  border-color: red;
  border-left: double;
  color: black
}

這個例子中的頂邊與底邊邊框由整數個橙色菱形構成，左邊與右邊邊框是單一個拉長的菱形，四個角落是不同顏色的菱形。用來鋪設的圖像為下，除了菱形部份以外，圖像是透明的：

圖像的像素是 81x81，分為九個一樣大的部份，樣式宣告為以下情形：

使用在 12x5 em 的 DIV 上的結果跟下面類似：

這是一個展示圖像邊框如何使用備用邊框樣式，但也擴展到邊框區域以外的複雜例子。圖像邊框是坡浪狀的綠色邊框，並有特殊的角落效果：

圖 10. ‘border-image-source’ 圖像，用四個 ‘border-image-slice’ 切在 124px 的地方，將圖像切成九的部份。

其餘的邊框屬性則將各部份鋪設成下面的樣子：

圖 11. 所有圖線邊框屬性與互相之間如何影響的圖，包含有或沒有圖像邊框時的渲染情形。

請注意 ‘border’ 屬性會重設 ‘border-image’，讓取消、重設邊框效果更為簡單：

    .notebox {
      border: double orange;
      /* 必須先設置 'border' 縮寫，否則會蓋掉 'border-image' */
      border-image: url("border.png") 30 round;
      /* 可以在這裡設置其他 'border' 屬性 */
      border-width: thin thick;
    }
    ...
    .sidebar .notebox {
      box-shadow: 0 0 5px gray;
      border-radius: 5px;
      border: none; /* 取消所有邊框 */
      /* 'border' 縮寫重設了 'border-image' */
    }