在制作網頁時我們往往需要在網頁中添加一些背景顏色、背景圖像讓網頁更加美觀，吸引訪問者的眼球。CSS 中提供了一系列用于設置 HTML 元素背景效果的屬性，下面本篇文章就來帶大家聊聊CSS 背景屬性，希望對大家有所幫助！

CSS 背景屬性

• （Background）

1. background 屬性: 一次性 集中定義 8個 背景相關屬性

• 關鍵點：
  • 背景 顏色
  • 背景圖像 位置
  • 背景圖像 尺寸
  • 背景圖像 重復
  • 背景圖像 定位位置
  • 背景 繪制區域
  • 背景圖像 固定和滾動
  • 要使用的 背景圖像
  • 繼承

<style type="text/css">     body     {      background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;      } </style>

• ⑴ 一個元素 多個背景圖像 瀏覽器支持

  • IE8 以及更早的瀏覽器 不支持
  • 即 指定對個 背景圖像的資源地址

• ⑵ background 屬性 “inherit” 瀏覽器支持

  • IE7 以及更早的瀏覽器 不支持 “inherit”。
  • IE8 需要!DOCTYPE。
  • IE9 支持 “inherit”。

• ⑶ 在一個聲明中，設置 所有的 背景屬性。
  • 簡寫屬性+集中定義: 是一種 CSS 簡寫屬性，用于一次性 集中定義 各種背景屬性，包括 color, image, origin與 size, repeat 方式等等。【推薦學習：css視頻教程】
    • 背景 background 簡寫屬性
    • 背景 屬性
    • 包含 其他 8 個 背景屬性

• ⑷ 背景background的 屬性值
  • 包含 其他 8 個 背景屬性
    • ① 可以設置如下 屬性和屬性值：
      • 多個 屬性值之間 空格 隔開
      • 背景層 分隔: 指定 多個背景層 時，使用 逗號分隔 每個背景層
        • 是一種 CSS 簡寫屬性，用于 一次性 集中定義 各種背景屬性，包括color, image, origin 與 size, repeat 方式等等。(每個屬性的意思,可以先學習完后面的內容 就能理解了)
          • background-color
          • background-position
          • background-size
          • background-repeat
          • background-origin
          • background-clip
          • background-attachment
          • background-image
          • inherit
            • 繼承
    • ② 背景background的 屬性值省略
      • 如果不設置 其中的某個值，也不會出問題
      • 比如 background:#ff0000 url('smiley.gif');也是允許的。
    • ③ 背景簡寫 默認值
      • 沒有指定 具體默認值
      • not specified
      • 對于所有簡寫屬性，任何 沒有被指定的值 都會被設定為它們的 初始值。

• ⑸ 每個 背景層的語法
  • 在每一層中，下列的值 可以出現 0 次或 1 次：
    • 每個背景層, 最多只能 出現一次的屬性
      • ① 背景圖像的 固定和滾動: background-attachment
      • ② 背景圖像: background-image
      • ③ 背景圖像 位置: background-position
      • ④ background-size
      • ⑤ 背景圖像 重復方式: background-repeat

• ⑹ 限定的 代碼位置
  • ① background-size 的 代碼位置
    • background-size 只能 緊跟在 背景位置 background-position 后面出現，以"/"分割
      • 如： “center/80%”.
  • ② background-clip 和 background-origin 可能 出現的次數
    • 0 次、1 次或 2 次(最多兩次)
      • 如果 出現 1 次:
        • 它 同時設定 background-origin 和 background-clip。
      • 如果 出現 2 次:
        • 第一次的出現 設置 background-origin，第二次的出現 設置 background-clip。
  • ③ 背景顏色 background-color的 代碼位置
    • 只能被包含在 最后的背景層中。
    • 只能在background的 最后 一個屬性上 定義，因為 整個元素 只有一種 背景顏色。

• ⑺ 背景background 的繼承性

  • 不繼承
  • no

• ⑻ 盡量使用 背景background屬性

  • 設置背景 技巧: 建議使用 簡寫屬性，而不是使用 單個屬性
  • 舊瀏覽器的支持好: 這個簡寫屬性, 在較老的瀏覽器中能夠得到 更好的支持
  • 代碼少: 需要鍵入的 字母也更少。

• ⑼ 背景簡寫background的版本

  • CSS1 + CSS3

• ⑽ 背景簡寫background 的JavaScript 語法

  • object.style.background="white url(paper.gif) repeat-y"

• ⑾ 背景簡寫background的 瀏覽器支持

• 示例1: 背景相關的屬性 在一個屬性background中 集中定義.

p{  	/*background-image: url(../images/四葉草背景.png);*/ 	/*background-repeat: no-repeat;*/   	/*第一個值 水平位置,第二個值 垂直位置*/ 	/*background-position: 50px 100px;	*/       /*背景固定*/ 	/*background-attachment: fixed;*/ 	/*background-color: yellow;	*/  	background: url(../images/四葉草背景.png) no-repeat 50px 100px;  }

2. background-color 屬性: 元素的 背景顏色 (純色,范圍到 邊框區的 外邊緣)

• ⑴ 元素的 背景顏色: background-color
  • 設置元素的 背景顏色
    • 會設置元素的 背景色, 屬性的值為 顏色值或關鍵字"transparent"二者選其一.
    • 設置一種 純色
  • 使用 background-color 屬性
  • 背景顏色 屬性

• ⑵ 背景顏色的 填充范圍
  • 元素的 內容、內邊距 和 邊框區域
    • ① 擴展到元素 邊框的 外邊界
      • （但不包括 外邊距）。
    • ② 如果 邊框 有透明 部分（如 虛線 邊框）
      • 會透過這些 透明部分 顯示出背景色

• ⑶ 背景顏色 語法

  • background-color:color_name red |hex_number #ff0000| rgb_number rgb(255,0,0)| transparent| inherit;

• 語法示例

/* 關鍵字 或 顏色名 Keyword values */ background-color: red; background-color: indigo;  /* 十六進制值 Hexadecimal value  (設置透明值 和 不設置 不透明值) */ background-color: #bbff00;    /* 完全不透明 Fully opaque (不設置 不透明值)*/ background-color: #bf0;       /* 完全不透明的 簡寫 Fully opaque shorthand (不設置 不透明值)*/ background-color: #11ffee00;  /* 完全透明 Fully transparent (設置 不透明值)*/ background-color: #1fe0;      /* 完全透明的 簡寫 Fully transparent shorthand (設置 不透明值) */ background-color: #11ffeeff;  /* 完全不透明 Fully opaque (設置 不透明值)*/ background-color: #1fef;      /* 完全不透明的 簡寫 Fully opaque shorthand (設置 不透明值) */  /* RGB value */ background-color: rgb(255, 255, 128);        /* 完全不透明 Fully opaque */ background-color: rgba(117, 190, 218, 0.5);  /* 50%透明 50% transparent (設置 不透明值)*/  /* HSL value */ background-color: hsl(50, 33%, 25%);         /* 完全不透明 Fully opaque */ background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent (設置 不透明值)*/  /* 特別的關鍵字 Special keyword values */ background-color: currentcolor; background-color: transparent;  /* 全局性的值 Global values */ background-color: inherit; background-color: initial; background-color: unset;

• ⑷ 背景顏色 屬性值

  • 關鍵點： 顏色名 十六進制 rgb代碼 透明 繼承

  • ① 顏色名: color_name

    • 顏色值為 顏色名稱的背景顏色
      • （比如 red）。

  • ② 十六進制: hex_number

    • 顏色值為 十六進制值的背景顏色
    • （比如 #ff0000）。

  • ③ rgb: rgb(),rgba()

    • 顏色值為 rgb 代碼的背景顏色
      • （比如 rgb(255,0,0)）

  • ④ hsl:hsl(),hsla()

  • ⑤ 透明 (無顏色,默認值): transparent

    • 背景顏色為 透明色 。
      • 該顏色 看上去將是 背景色。從技術上說，它是帶有 阿爾法通道 為最小值的黑色，是rgba(0,0,0,0)的簡寫。
    • 嚴格來說, 透明色,也是 一種顏色.

  • ⑥ 繼承:inherit

    • 從父元素繼承 background-color 屬性的設置

• ⑸ 背景顏色繼承性
  • 不繼承
  • no
• ⑹ 背景顏色 css 版本
  • CSS1
• ⑺ JavaScript 語法
  • object.style.backgroundColor="#00FF00"

• ⑻ 背景顏色 和 可訪問性
  • 可訪問性 問題
  • 對比度: 要確保 背景顏色 和 文本顏色 之間的 對比度足夠高，以使 視覺條件差的人 能夠閱讀 頁面的內容。
  • 顏色對比度
    • 是通過 比較文本的亮度 和 背景顏色值 來確定的。
      • 為了滿足當前的 Web 內容可訪問性準則(WCAG)
      • 文本內容的比例: 4.5:1
      • 大一些的文本(如標題)的比例為 3:1。
      • 大文本定義為18.66px，粗體bold或更大，24px或更大。

• ⑼ 實用工具: WebAIM: 對比檢查器 Contrast Checker (網頁版)

  • 檢查 文字顏色 和 背景顏色,看是否 能夠很好的滿足 用戶的視覺需要

• ⑽ 用戶的感知 和 可訪問性
  • Perceivable – Accessibility | MDN(英文版 待翻譯)
    • 提供了關于如何編寫 web 內容的實用建議，使其符合 web 內容可訪問性指南(WCAG) 2.0和2.1的 可感知原則中 列出的成功標準。
    • 感知狀態: 是指用戶 必須能夠 以某種方式感知它，使用他們的 一種或多種感官。

• ⑾ 背景圖像 和 背景顏色
  • 圖像 覆蓋在 顏色上方: 背景圖像,覆蓋在 背景顏色的上面.
  • 背景的統一顏色,背景色 是在指定的 背景圖像后 呈現的
    • 盡管顏色 仍然可以通過 圖像中的任何透明度 看到。

• ⑿ 背景顏色background-color 的 瀏覽器支持

• 示例1: 同時顯示 背景圖像 和 背景顏色

  • 背景圖像,覆蓋在 背景顏色的上面.

• css

.bgimg-fixed {      background-color: pink;         background-image: url(../images/四葉草背景.png);         background-repeat: no-repeat;  }

• 示例2: 把十六進制值的 顏色, 設置了透明值. (最后兩位,每位的值: 0-f)
  • 改變透明度 (即 最后 多加的 兩位的值),顏色 也會隨之改變)
    • 00: 完全透明了,看不到顏色,跟沒設置顏色一樣.
    • ff: 就是 純紅色了,相當于沒加 透明值.

    /*把十六進制 設置了透明值的 紅色,最后兩位的 33 就是透明值*/     background-color: #ff000066;     background-image: url(../images/四葉草背景.png);     background-repeat: no-repeat;  }

3. background-image 屬性: 背景圖像 (范圍到 內邊距區的 外邊緣,不含 邊框)

• ⑴ 背景圖像:

  • 為一個元素 設置 一個或多個 背景圖像。
    • background-image 屬性
    • 背景圖像 屬性

• ⑵ 元素的 背景范圍

  • 背景色: background-color

    • 背景色 默認到 邊框區的 外邊緣

    • 邊框區的下方 會顯示 背景色,虛線邊框的話,可以直接看到 邊框下的背景色

  

  • 背景圖像: background-image

    • 背景圖像 不重復時 (background-repeat:no-repeat;),圖像 默認在 內邊距區的 外邊緣

      • 不在邊框區,也不會顯示在 邊框的下方 (特意加粗的邊框,下方沒有背景圖像).

• ⑶ 背景圖像的 位置

  • 元素的 左上角: 默認地，背景圖像的位置 位于 元素的 左上角
  • 重復: 在 水平和垂直方向上 重復

• ⑷ 背景圖像的 語法

  • background-image: none|url('URL')|inherit;

• ⑸ 背景圖像的 屬性值
  • 關鍵點：路徑url 不顯示 繼承
    • ① 圖像路徑/地址: url('URL')
      • 指向 圖像的路徑,簡單的 靜態圖像，用 URL引用
      • url值 帶引號.
    • ② 無圖像 (默認值): none
      • 不顯示 背景圖像。
        • 如果一個 指定的圖像 無法被繪制，瀏覽器會 等同于其值被設為 none。
          • (比如，被指定的 URI 所表示的文件 無法被加載)
    • ③ 繼承: inherit
      • 從父元素 繼承 background-image 屬性的設置。
    • ④ 漸變圖像
      • gradient 相關的方法 生成的 漸變圖像

• ⑹ 背景圖像不可用的 預防措施 (回退)
  • ① 設置 背景顏色:
    • 設置一種 可用的背景顏色 background-color
      • 假如 背景圖像不可用，頁面也可以獲得 良好的視覺效果。
  • ② 不顯示背景色 也要設置 (圖像的回退):
    • 即使圖像是不透明的，背景色 在通常情況下 并不會被顯示，開發者仍然應該 指定 背景顏色 background-color 屬性。
    • 如果圖像無法被加載—例如，在網絡連接斷開的情況下—背景色 就會被繪制。

• ⑺ 背景圖像 相關屬性

  • ① 設置 背景圖像: background-image

    • 在元素的背景中 設置一個圖像

  • ② 圖像的 重復方式: background-repeat

    • 可以 沿著某個軸（x 軸或 y 軸）平鋪重復，或者根本不重復。

  • ③ 圖像的 位置:background-position

    • 根據 background-position 屬性的值放置。

  • ④ 圖像/背景色的 裁剪/繪制 區域: background-clip

• ⑻ 多背景圖像的 使用
  • ① 逗號 分隔: 一個background-image指定 多個背景圖像,用 逗號,分隔 多個背景地址.
  • ② z 方向 堆疊: 在繪制時，圖像以 z 方向 堆疊的方式進行。
  • ③ 代碼在前,顯示在上: 先指定的圖像 會在之后指定的圖像 上面繪制。
    • 因此 指定的 第一個圖像“最接近用戶”。

• ⑼ 和背景圖像的 相對位置

  • ① 邊框在 背景圖像之上:
    • 元素的邊框 border會在 背景圖像之上 被繪制
  • ② 背景顏色 在背景圖像之下:
    • 背景顏色 background-color 會在 背景圖像之下 繪制。
  • ③ 位置關系: 邊框(最上方,最接近用戶) > 背景圖像 > 背景顏色
    • 背景圖像 無法覆蓋 邊框
    • 背景顏色 無法覆蓋 背景圖像

• ⑽ 圖像和盒子:

  • 圖像的繪制 與 盒子 以及 盒子的邊框 的關系，需要在 CSS 屬性 background-clip 和 background-origin中定義。

• 示例1: 同時設置 兩個背景圖片

#lizard{ 	background-image: url("../images/lizard.png"), url("../images/star.png"); }

• 兩個都是 矢量圖,圖片背景 都是透明的
  • 代碼在前,顯示在上: 代碼在前面的 圖像,顯示在上方.

  • 如果背景圖像的 背景 不是透明的(比如 其他部分 是白色 ≠透明色),可能會完全遮蓋會下方的圖像.

• 示例2: 同時設置 兩個背景圖像,并 分別設置 不同的 重復方式.

#lizard{ 	background-image: url("../images/四葉草背景.png"), url("../images/lizard.png"); 	background-repeat: no-repeat,repeat; }

• 背景不透明的 遮蓋性:
  • 因為 四葉草 不是背景透明的圖片(整個圖片的 其余部分是 白色).所以除了 四葉草 ,其余部分 也遮蓋了一部分 下方的圖像.

• 關聯知識: <image> css 圖像 數據類型
  • CSS的<image> 圖像 數據類型
    • 描述的是 2D 圖形。
    • 表示一個 二維 圖像。
  • CSS 中的 兩種類型的圖像：
    • ① 簡單的 靜態 圖像
      • 經常用URL引用
    • ② 動態生成 的 圖像
      • 比如 DOM 樹的部分元素 樣式漸變 或者 計算樣式產生
      • 使用 gradient 相關的方法 或element()生成
    • 附加的 CSS圖像函數
      • 包括image()、image-set()和cross-fade()。

• 圖像搭配的 CSS屬性

  • background-image、border-image、content、cursor和 list-style-image。
  • 一個 < image > CSS 圖像 數據類型 的分類
    • <image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
    • ① 使用url()方法: (常用,熟記)
      • 用url 引用的圖像
    • ② gradient 相關的方法 生成的圖像 (常用,熟記)
    • ③ element()方法: (實驗中 方法)

      • 頁面的一個部分，定義在element()方法中；

    

    • ④ image() 函數 (實驗中 方法)

      • 由image()函數定義的 一種圖像、圖像片段 或 顏色的實色塊

    

    • ⑤ cross-fade() 函數

      • 由cross-fade() 函數 定義的 兩個或多個圖像的 混合。

    

    • ⑥ image-set() 函數
      • 根據 image-set() 函數定義的分辨率進行選擇的圖像。

• 圖像類型值的 瀏覽器支持