層疊樣式表/背景

背景屬性

有五個屬性控制元素的背景

background-color W3C規範 CSS1 CSS2.1

設定背景顏色，如果未指定背景影像或影像未覆蓋整個元素，則將看到此顏色。 它也會顯示在影像中的任何透明區域。 顏色可以設定為任何 CSS顏色 或關鍵字 transparent。

background-image W3C規範 CSS1 CSS2.1

用作背景的影像。

background-repeat W3C規範 CSS1 CSS2.1

控制背景影像的平鋪 (可能的值: repeat | repeat-x | repeat-y | no-repeat | inherit)

background-attachment W3C規範 CSS1 CSS2.1

背景是否與頁面一起滾動 (預設) 或者是否固定在視窗內？

background-position W3C規範 CSS1 CSS2.1

將影像放置在元素的邊界框內。

您應該考慮提供背景顏色以及背景影像，以防使用者停用了影像。

示例

p {
  background-color: #ccc
}

body {
  background-color: #8cf;
  background-image: url(sea.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom
}

簡寫屬性

W3C規範 CSS1 CSS2.1

background 簡寫屬性可用於在一個宣告中設定所有五個單獨的背景屬性，例如

p {
  background-color: #ccc
}

body {
  background: #8cf url(sea.jpg) no-repeat fixed bottom
}

等效於前面的示例。

注意，如果從 background 屬性中省略了一些值，則缺失值的單個屬性將設定為其初始值。 如果多個規則在元素上設定背景屬性，則記住這一點很重要。 例如

div#navigation {
  background: #933
}

等效於

div#navigation {
  background-color: #933;
  background-image: none; /* initial value */
  background-repeat: repeat; /* initial value */
  background-attachment: scroll; /* initial value */
  background-position: 0% 0% /* initial value */
}

高階透明度

透明度是影響所有子級的塊級屬性。 要使用具有 alpha 通道的顏色，請參見 RGBA 和 HSLA。

背景屬性中的透明度仍然是一個新概念，並非所有網路瀏覽器都相容，但這裡有一點關於此功能的資訊

filter: alpha(opacity=40); -moz-opacity:.40; opacity:.40;

新增 alpha(opacity=40) 將新增 40% 的 alpha 透明度，但如前所述，這仍然不適用於所有瀏覽器，例如要使其在 Firefox 上執行，必須使用 -moz 技巧。 所以 -moz-opacity:.40 顯然會做同樣的事情，但這部分程式碼只與 Firefox 使用者相關。

transparency W3C規範 CSS3

外部連結

一個很好的演示，展示了在 css/edge 上使用背景可以實現的效果

一個很好的關於在背景中使用透明度的教程。