背景图 ( 定位、尺寸 )

CSS 除了可以设定背景颜色，还可以设定“背景图片”，这篇教学会介绍 CSS 设定背景图片的样式属性：background-image、background-position、background-size、background-origin，实作背景图片的定位、定位点以及尺寸设定。

快速导览：

• background-image 背景图片
• background-position 背景图片定位
• background-origin 背景图片定位点
• background-size 背景图片尺寸

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

background-image 背景图片

background-image 表示元素的“背景图片”，有下列几个特性：

• 支援使用“url() 函数”读取图档，包含外部图档、base64 位图或 SVG 内嵌图像等。
• 支援使用“渐层”相关函数使用渐层色 ( 参考“CSS 函数 ( 渐层色 )” )
• 默认背景图会延伸至“padding + border”区域。
• 在显示阶层中，background-image 会覆盖 background-color。
• 不会继承。

如果要使用 base64 编码和 SVG 作为背景图，需要具有下方的必要内容，并自订替换后方图片的 base64 编码或 SVG 程序码，SVG 需要使用 background-size 搭配 SVG viewBox 进行尺寸设定，并将色彩编码的“#”改成“%23”才能正常显示，此外，也建议将 SVG 进行“复合路径”的动作，让多个图层的路径变成单一图层。

/* base64 版本 */
.base64 {
  background-image: url("data:image/png;base64,編碼");
}
/* SVG 版本，viewBox 需要根據不同圖片定義，例如下方的 viewBox 為 0 0 225 225 */
.svg {
  background-size: 100% auto; /* 有時需搭配背景尺寸才能正確顯示 */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 225 225">SVG 形狀程式碼</svg>');
}

下方范例会让不同的元素呈现不同的背景图片，在默认状态下背景图片会延伸填满 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-size: 100% auto;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 225 225"><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>

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>

如果将背景图片套用到“不可置换行内元素”，因为实际的“内容区域”仍然存在 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>

如果是图片元素 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>

background-position 背景图片定位

background-position 使用“对齐关键字”或“位置偏移量”来定义背景图片的位置，可以将关键字与偏移量互相搭配，产生“1～4”个属性值，没有继承特性，下列方列出相关撰写语法：

background-position 衍伸的样式属性为 background-position-x 和 background-position-y，分别只针对水平方向和垂直方向的背景定位。

• 对齐关键字

  单纯使用位置名称进行对齐，这个写法会有“1～2”个属性值，使用后表示会将背景图片的边缘或中心点贴齐指定位置，注意，不能同时使用“top 与 bottom”或“left 与 right”。

  关键字	等同属性值	说明
  top	center top	靠上对齐
  right	right center	靠右对齐
  bottom	center bottom	靠下对齐
  left	left center	靠左对齐
  center	center center	置中对齐
  left top	-	靠左上对齐 ( 默认值 )
  left bottom	-	靠左下对齐
  right top	-	靠右上对齐
  right bottom	-	靠右下对齐

• 位置偏移量 ( 百分比 )

  使用百分比单位，在没有设定对齐关键字的状态下，采用“left top”的方式进行偏移，并按照“百分比公式”计算偏移量，由于最终偏移结果是按照公式计算出的数值，如果背景图尺寸大于元素尺寸，计算后会往反向移动 ( 类似设定负值的 px )，如果背景图尺寸小于元素尺寸，计算后会正向移动，这个写法会有“1～2”个属性值。

  ( 容器寬度 - 圖片寬度 ) * x 偏移百分比 = x 方向偏移量
  ( 容器高度 - 圖片高度 ) * y 偏移百分比 = y 方向偏移量
  

  属性值	等同属性值 ( top left )	说明
  50%	50% 50%	左往右偏移 50%，上往下偏移 50%
  50% 100%	-	左往右偏移 50%，上往下偏移 100%

• 位置偏移量 ( px、em、rem )

  使用非百分比的长度单位，在没有设定对齐关键字的状态下，采用“left top”的方式进行偏移，px 表示像素，em 表示元素本身字号，rem 表示根元素字号，设定负值会往反方向移动，这个写法会有“1～2”个属性值。

  属性值	等同属性值 ( top left )	说明
  50px	50px 50px	左往右偏移 50px，上往下偏移 50px
  50px 100px	-	左往右偏移 50px，上往下偏移 100px

• 混合对齐关键字与位置偏移量

  将“对齐关键字”和“位置偏移量”组合，就能指定“从哪个方向出发的偏移量”，注意，使用 center 位置关键字不会进行偏移，这个写法会有“2～4”个属性值。

  属性值	等同属性值	说明
  left 50px	left 50px center	靠左对齐并往右偏移 50px，垂直置中
  bottom 100px	center bottom 100px	水平置中，靠下对齐并往上偏移 100px
  50px bottom 100px	left 50px bottom 100px	靠左对齐并往右偏移 50px，靠下对齐并往上偏移 100px
  50px top	left 50px top	靠左对齐并往右偏移 50px，靠上对齐
  right 20% bottom 20%	-	靠右对齐并往左偏移 20%，靠下对齐并往上偏移 20%

下方范例会使用 1～9 的“九宫格图片”作为背景图，会分别让不同的 div，分别呈现不同定位的效果。

线上展示：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>

background-origin 背景图片定位参考

由于网页每个元素都是“容器”，容器会按照“容器盒子模型”分成内边距、边框和外边界，因此需要依靠 CSS 的 background-origin 样式属性，设定背景图片的定位点，这也是背景图片定位的参考依据，background-origin 有下列的属性值：

下方的范例会设定背景不要重复，并使用黄色背景色观察不同属性值的效果，从中可以观察如果没有从边框或内边距进行定位对齐的背景图，边框或内边距就会显示背景的黄色 ( 因为背景色会延伸至边框外缘 )。

线上展示：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>

如果将背景图改成“渐层色”，也会遵循背景图定位点的设定 ( 渐层样式：background-image: linear-gradient(to top, blue, yellow); )。

不过如果有设定 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>

background-size 背景图片尺寸

background-size 使用“尺寸关键字”或“尺寸数值”的属性值来定义背景图片的尺寸，没有继承特性，由于 background-size 主要针对“具有长宽尺寸或比例”的图片计算出背景图的长宽，因此在某些特殊情况，例如部分特殊设定的 SVG 没有尺寸信息，就不会套用背景图片尺寸样式 ( 渐层色的背景也可以改变尺寸 )。

下方列出属性值的说明：

使用 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>

小结

替元素套用背景图的用法和使用 img 元素有点类似，但 CSS 提供了许多控制背景图的样式属性，只要充分运用这些样式，就能透过背景图做出更多有趣的效果。

意见反馈