搜尋

背景圖片 ( 定位、定位點、尺寸 )

CSS 除了可以設定背景顏色，還可以設定「背景圖片」，這篇教學會介紹 CSS 設定背景圖片的樣式屬性：background-image、background-position、background-size、background-origin，實作背景圖片的定位、定位點以及尺寸設定。

快速導覽：

CSS 教學 - 背景圖片 ( 定位、定位點、尺寸 )

background-image 背景圖片

background-image 表示元素的「背景圖片」，有下列幾個特性：

  • 支援使用「url() 函式」讀取圖檔，包含外部圖檔、base64 點陣圖或 SVG 內嵌影像等。
  • 支援使用「漸層」相關函式使用漸層色 ( 參考「CSS 函式 ( 漸層色 )」 )
  • 預設背景圖會延伸至「容器 padding 區域 ( 不會延伸到邊框 )」。
  • 在顯示階層中，background-image 會覆蓋 background-color。
  • 不會繼承。

下方的範例會讓不同的元素呈現不同的背景圖片，在預設狀態下背景圖片會延伸填滿 padding 空間，從中也可以觀察到透明背景的圖片，會顯示下方 background-color 的色彩。

線上展示：https://codepen.io/oxxo/pen/LYKEoKP

<!-- HTML 程式碼 -->
<div class="a">使用 jpg</div>
<div class="b">使用背景透明 png</div>
<div class="c">使用 base64 圖檔</div>
<div class="d">使用內嵌 SVG</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 150px;
    border: 1px solid #000;
    background-color: yellow;
    margin: 5px;
    float: left;
  }
  .a {
    color: white;
    background-image: url("https://steam.oxxostudio.tw/image/index-css.jpg");
  }
  .b {
    background-image: url("https://steam.oxxostudio.tw/download/css/function-filter-demo.png");
  }
  .c {
    background-image: url("data:image/png;base64,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");
  }
  .d {
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="225px" height="225px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path style="opacity:1" fill="%23ff5916" d="M 67.5,170.5 C 65.9814,173.526 65.3148,176.859 65.5,180.5C 65.5034,183.025 65.8367,185.359 66.5,187.5C 67.6737,196.514 71.507,204.181 78,210.5C 78.6877,211.332 78.521,211.998 77.5,212.5C 48.2324,195.34 32.0657,169.674 29,135.5C 27.6436,114.26 31.9769,94.26 42,75.5C 42.6667,74.1667 43.3333,74.1667 44,75.5C 46.6601,86.484 52.1601,95.8173 60.5,103.5C 60.56,104.043 60.8933,104.376 61.5,104.5C 61.8333,103.667 62.1667,102.833 62.5,102C 62.0542,98.6499 61.3875,95.4833 60.5,92.5C 60.2665,87.1053 60.5998,81.772 61.5,76.5C 62.4915,71.9496 63.4915,67.2829 64.5,62.5C 74.5133,33.6547 94.1799,14.8213 123.5,6C 124.833,5.33333 126.167,5.33333 127.5,6C 125.539,9.21483 124.373,12.7148 124,16.5C 123.298,25.2032 123.632,33.8698 125,42.5C 128.058,50.2834 131.392,57.9501 135,65.5C 143.853,79.8737 152.187,94.5404 160,109.5C 161.897,115.485 163.73,121.485 165.5,127.5C 177.98,110.853 182.48,92.1865 179,71.5C 200.654,107.867 200.988,144.534 180,181.5C 168.36,199.822 152.194,211.989 131.5,218C 153.158,203.498 160.325,183.665 153,158.5C 150.433,164.069 147.433,169.403 144,174.5C 142.104,176.53 139.937,178.197 137.5,179.5C 137.158,172.876 135.658,166.543 133,160.5C 124.602,147.036 117.269,133.036 111,118.5C 109.524,113.594 108.524,108.594 108,103.5C 92.0711,117.283 86.0711,134.617 90,155.5C 91.8739,162.952 94.0405,170.285 96.5,177.5C 84.6868,173.684 77.3534,165.684 74.5,153.5C 70.7749,158.614 68.4415,164.281 67.5,170.5 Z"/></g><g><path style="opacity:1" fill="%23ff8e66" d="M 64.5,62.5 C 63.4915,67.2829 62.4915,71.9496 61.5,76.5C 61.0439,71.4045 62.0439,66.7378 64.5,62.5 Z"/></g><g><path style="opacity:1" fill="%23ffcbb9" d="M 60.5,92.5 C 61.3875,95.4833 62.0542,98.6499 62.5,102C 62.1667,102.833 61.8333,103.667 61.5,104.5C 60.8933,104.376 60.56,104.043 60.5,103.5C 60.7037,100.082 60.7037,96.4158 60.5,92.5 Z"/></g><g><path style="opacity:1" fill="%23ff895f" d="M 67.5,170.5 C 66.7081,176.13 66.3748,181.797 66.5,187.5C 65.8367,185.359 65.5034,183.025 65.5,180.5C 65.3148,176.859 65.9814,173.526 67.5,170.5 Z"/></g></svg>');
  }
</style>

CSS 教學 - 背景圖片 ( 定位、定位點、尺寸 ) - background-image 背景圖片

background-image 如果搭配「漸層色」相關函式，就能讓元素背景顯示漸層色，下方會使用六個不同的 div 顯示六種不同的漸層色 ( 參考「CSS 函式 ( 漸層色 )」)。

線上展示：https://codepen.io/oxxo/pen/NWZPVZa

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    background-color: yellow;
    margin: 2px;
    float: left;
  }
  .a {
    color: white;
    background-image: linear-gradient(to top, red, yellow);
  }
  .b {
    background-image: radial-gradient(red, orange, yellow, green, blue, purple);
  }
  .c {
    background-image: conic-gradient(red, orange, yellow, green, blue, purple, red);
  }
  .d {
    background-image: repeating-linear-gradient(
        45deg,
        orange 0%,  orange 10%,
        black 10%, black 20%);
  }
  .e {
    background-image: repeating-radial-gradient(at 70% 70%, orange 0%, black 20%);
  }
  .f {
    background: repeating-conic-gradient(
          red 0deg, red 20deg,
          white 20deg, white 40deg
      );
  }
</style>

CSS 教學 - 背景圖片 ( 定位、定位點、尺寸 ) - background-image 顯示漸層色

如果將背景圖片套用到「不可置換行內元素」，因為實際的「內容區域」仍然存在 padding 和 border 的空間，因此套用背景圖片時，預設狀態下背景圖片仍然會填滿這些空間，此外，由於透過「行高」所產生的空間不屬於內容區域，就不會填滿背景圖片。

線上展示：https://codepen.io/oxxo/pen/XWLJwLo

<!-- HTML 程式碼 -->
<div class="a">
  <span>STEAM 教育學習網透過一系列<strong>免費且高品質</strong>的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
</div>
<div class="b">
  <span>STEAM 教育學習網透過一系列<strong>免費且高品質</strong>的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 240px;
    margin: 20px;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #000;
  }
  strong {background-image: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");}
  .a strong {
    padding:20px; 
    border: 10px solid #f005;  /* 利用 padding 和 border 延伸範圍 */
  }
  .b {line-height: 50px;}      /* 利用行高產生空間 */
</style>

CSS 教學 - 背景圖片 ( 定位、定位點、尺寸 ) - background-image 不可置換行內元素

如果是圖片元素 img 或 svg 等「可置換」行內容器 ( 顯示類型大多都是 inline-block )，在預設狀態下 padding 和 border 會向外擴展範圍，背景色圖片也就會填滿這些範圍，如果圖片本身是透明背景，透明區域也會顯示背景圖片。

線上展示：https://codepen.io/oxxo/pen/qBzEGze

<!-- HTML 程式碼 -->
<img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
<img class="b" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg">
<img class="c" src="https://steam.oxxostudio.tw/download/css/border-svg-2.svg">

<!-- CSS 程式碼 -->
<style>
  img {
    width: 120px;
    background-image: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");
  }
  .a {
    border: 10px solid #000;
    padding: 10px;
  }
  .b {
    border: 20px dashed #00f8;
    padding: 5px;
  }
  .c {
    border: 5px double #000;
    padding: 5px;
  }
</style>

CSS 教學 - 背景圖片 ( 定位、定位點、尺寸 ) - background-image 可置換行內元素

background-position 背景圖片定位

background-position 使用「對齊關鍵字」或「位置偏移量」來定義背景圖片的位置，可以將關鍵字與偏移量互相搭配，產生「1～4」個屬性值，沒有繼承特性，下列方列出相關撰寫語法：

下方範例使會使用幾個 div，分別呈現不同定位的效果 ( 背景圖使用 1～9 的九宮格圖片 )。

線上展示：https://codepen.io/oxxo/pen/PorwvMW

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    margin: 10px;
    background-image: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");
  }
  .a {background-position: center center;}          /* 水平置中，垂直置中 */
  .b {background-position: 0% 0%;}                  /* 靠左靠上對齊，偏移 0% */
  .c {background-position: right bottom;}           /* 靠右靠下對齊 */
  .d {background-position: 20px 50px;}              /* 靠左靠上對齊，往右移動 20px，往下移動 50px */
  .e {background-position: right 20px bottom 50px;} /* 靠右靠下對齊，往左移動 20px，往上移動 50px */
  .f {background-position: center bottom 20px;}     /* 水平置中，靠下對齊，往上移動 20px */
</style>

CSS 教學 - 背景圖片 ( 定位、定位點、尺寸 ) - background-position 背景圖片定位點

background-origin 背景圖片定位點

由於網頁每個元素都是「容器」，容器會按照「容器盒子模型」分成內邊距、邊框和外邊界，因此需要依靠 CSS 的 background-origin 樣式屬性，設定背景圖片的定位點，這也是背景圖片定位的參考依據，background-origin 有下列的屬性值：

屬性值 說明
border-box 對齊點為邊框 ( border ) 外緣。
padding-box 對齊點為內邊距 ( padding ) 外緣。
content-box 對齊點為內容外緣。

下方的範例會設定背景不要重複，並使用黃色背景色觀察不同屬性值的效果，從中可以觀察如果沒有從邊框或內邊距進行定位對齊的背景圖，邊框或內邊距就會顯示背景的黃色 ( 因為背景色會延伸至邊框外緣 )。

線上展示：https://codepen.io/oxxo/pen/XWLJwvo

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 150px;
    height: 50px;
    border: 20px solid #0005;
    padding: 20px;
    margin: 10px;
    background: no-repeat;     /* 背景不重複 */
    background: cover;
    background-image: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");
    background-color: yellow;  /* 背景色黃色 */
  }
  .a {background-origin: border-box;}   /* 背景圖的定位從邊框外緣開始 */
  .b {background-origin: padding-box;}  /* 背景圖的定位從內邊距外緣開始 */
  .c {background-origin: content-box;}  /* 背景圖的定位從內容外緣開始 */
</style>

CSS 教學 - 背景圖片 ( 定位、定位點、尺寸 ) - background-origin 背景圖片定位點

如果將背景圖改成「漸層色」，也會遵循背景圖定位點的設定 ( 漸層樣式：background-image: linear-gradient(to top, blue, yellow); )。

CSS 教學 - 背景圖片 ( 定位、定位點、尺寸 ) - background-origin 背景圖片為漸層色

不過如果有設定 background-clip 樣式屬性，則在特定屬性值的狀態下，背景會被「裁切」，不論是背景色或是背景圖都不會出現 ( 參考：background-clip 裁切背景 )，下方的範例設定 background-clip: content-box;，因此只有內容會顯示背景圖，但背景圖仍然會按照 background-origin 而設定定位點。

線上展示：https://codepen.io/oxxo/pen/GRbgbKj

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 150px;
    height: 50px;
    border: 20px solid #0005;
    padding: 20px;
    margin: 10px;
    background: no-repeat;     /* 背景不重複 */
    background: cover;
    background-image: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");
    background-color: yellow;  /* 背景色黃色 */
    background-clip: content-box;  /* 設定背景裁切模式 */
  }
  .a {background-origin: border-box;}   /* 背景圖的定位從邊框外緣開始 */
  .b {background-origin: padding-box;}  /* 背景圖的定位從內邊距外緣開始 */
  .c {background-origin: content-box;}  /* 背景圖的定位從內容外緣開始 */
</style>

CSS 教學 - 背景圖片 ( 定位、定位點、尺寸 ) - background-origin 搭配 background-clip

background-size 背景圖片尺寸

background-size 使用「尺寸關鍵字」或「尺寸數值」的屬性值來定義背景圖片的尺寸，沒有繼承特性，由於 background-size 主要針對「具有長寬尺寸或比例」的圖片計算出背景圖的長寬，因此如果使用的圖片沒有長寬尺寸或比例 ( 例如漸層色、部分特殊設定的 SVG )，就不會套用背景圖片尺寸樣式。

下方列出屬性值的說明：

屬性值 類型 說明
cover 關鍵字 維持圖片比例，將寬度或高度縮放至元素「最大邊長」( 無法和數值搭配 )。
contain 關鍵字 維持圖片比例，將寬度或高度縮放至元素「最小邊長」」( 無法和數值搭配 )。
auto 關鍵字 維持圖片比例，根據寬調整高，或根據高調整寬，沒有設定寬高就使用圖片原始尺寸。
N% 數值 寬 = 元素寬 x N%，高 = 元素高 x N%。
X% Y% 數值 寬 = 元素寬 x X%，高 = 元素高 x Y%。
Npx 數值 寬 = Npx，高 = Npx。
Xpx Ypx 像數值 寬 = Xpx，高 = Ypx。
em 數值 使用元素字型大小，算法等同 px 或 %
rem 數值 使用根元素字型大小，算法等同 px 或 %

使用 background-size 時，只有 auto 關鍵字可以和數值共同使用，產生 1～2 個屬性值，如果 auto 寫在數值左方表示寬度等比例調整，auto 寫在數值右方表示高度等比例調整，下方使用幾個 div，呈現不同的 background-size 屬性值的效果 ( 範例將背景圖片設定為不重複 )。

線上展示：https://codepen.io/oxxo/pen/WNqbqeX

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 180px;
    height: 100px;
    border: 1px solid #000;
    margin: 10px;
    background-repeat: no-repeat;
    background-image: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");
  }
  .a {background-size: cover;}       /* 填滿最大邊長 */
  .b {background-size: contain;}     /* 填滿最小邊長 */
  .c {background-size: auto 40%;}    /* 寬度等比例，高度 = 元素高 x 40% */
  .d {background-size: 40%;}         /* 寬度 = 元素寬 x 40%，高度 = 元素高 x 40% */
  .e {background-size: 80% 20px;}    /* 寬度 = 元素寬 x 80%，高度 = 20px */
  .f {background-size: 30px 200px;}  /* 寬度 = 30px，高度 = 200px */
</style>

CSS 教學 - 背景圖片 ( 定位、定位點、尺寸 ) - background-size 背景圖片尺寸

小結

替元素套用背景圖的用法和使用 img 元素有點類似，但 CSS 提供了許多控制背景圖的樣式屬性，只要充分運用這些樣式，就能透過背景圖做出更多有趣的效果。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

CSS 教學

基本介紹

認識 CSS 開始使用 CSS CSS 語法規則 CSS 命名原則

CSS 選擇器

認識 CSS 選擇器 優先順序 ( 權重 ) 樣式繼承與聯集 元素選擇器 ID 和 Class 選擇器 屬性選擇器 文件結構選擇器 虛擬類別選擇器 ( 結構 ) 虛擬類別選擇器 ( 類型 ) 虛擬類別選擇器 ( 輸入 ) 虛擬類別選擇器 ( 行為 ) 虛擬類別選擇器 ( 超連結 ) 虛擬類別選擇器 ( 邏輯 ) 虛擬類別選擇器 ( 其他 ) 虛擬元素選擇器 群組與組合選擇器

數值與單位

關鍵字與文字數值 長度與角度單位 顏色單位 位置名稱與時間單位

變數與內容函式

變數 數學計算 文字與清單計數 生成內容與引號

顏色與濾鏡

色彩模型 漸層色 影像濾鏡

文字樣式

使用通用字型 使用外部字型 @font-face 定義字型 文字尺寸 常用文字樣式 文字換行 文字空白與 Tab 大小 文字行高與縮排 文字水平與垂直對齊 文字書寫方向 特殊文字樣式

元素容器

容器顯示類型 ( display ) 元素 display 對照表 盒子模型 ( Box Model ) 寬度與高度 內邊距 ( padding ) 外邊界 ( margin ) 邊框 ( border ) 邊框圓角 影像邊框 輪廓 ( outline ) 可見性與透明度 內容溢出與裁切

背景與陰影

背景顏色 背景圖 ( 定位、尺寸 ) 背景圖 ( 固定、重複 ) 背景圖 ( 多重背景、混合 ) 背景縮寫 ( background ) 容器陰影 ( box-shadow )

清單與表格

清單樣式 清單計數器 定義計數規則 表格基本樣式 表格邊框樣式 表格內容寬度與對齊

基本排版與定位

元素排版方式 浮動 ( float ) 浮動形狀 定位 ( position )

Flexbox 彈性排版

Flexbox 彈性盒子 Flexbox 對齊方式 Flexbox 彈性伸縮

Grid 網格排版

Grid 網格容器與格線 Grid 網格空間與命名 Grid 網格流向與間距 Grid 排列網格項目 Grid 項目對齊與順序

轉場與動畫

轉場 ( transition ) 轉場觸發事件 動畫 ( animation ) 動畫觸發事件 多重動畫的權重與順序

變形、裁切與遮罩

裁切路徑 ( clip-path ) 影像遮罩 ( mask )