背景图 ( 固定、重复 )

这篇教学会介绍 CSS 背景图片相关的样式属性，会运用 background-repeat 设定背景图片的重复，也会使用 backgroud-attachment 设定背景图是否固定在网页中，当卷动网页时背景图固定不动。

快速导览：

• background-repeat 背景图片重复
• background-attachment 背景图片固定

教学影片

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

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

background-repeat 背景图片重复

background-repeat 可以设定“背景图是否重复”，没有继承特性，具有下列几个属性值：

下列使用几个 div 呈现不同的 background-repeat 属性值效果。

线上展示：https://codepen.io/oxxo/pen/JjQoQPg

<!-- 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 {
    height: 120px;
    width: 160px;
    margin: 10px;
    border: 1px solid #000;
    background-image: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");
    background-size: 50px;
  }
  .a {background-repeat: repeat;}    /* 按照圖片設定尺寸重複 */
  .b {background-repeat: no-repeat;} /* 不重複 */
  .c {background-repeat: space;}     /* 使用空白分隔重複的背景圖，保持原本長寬尺寸重複且不被裁切 */
  .d {background-repeat: round;}     /* 修改重複的背景圖的長寬比例，讓重複的背景圖不被裁切 */
  .e {background-repeat: repeat-x;}  /* 水平重複 */
  .f {background-repeat: repeat-y;}  /* 垂直重複 */
</style>

background-repeat 除了使用“一个”属性值，也可以使用“两个”属性值 ( 使用空白分隔 )，例如“repeat round”，第一个属性值表示水平方向的重复，第二个属性值表示垂直方向重复，下方列出与一个属性值的对照表。

下方范例会运用两个属性值的方式，做出水平与垂直使用不同重复方式的效果。

线上展示：https://codepen.io/oxxo/pen/mdZyZdr

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

<!-- CSS 程式碼 -->
<style>
  div {
    height: 120px;
    width: 160px;
    margin: 10px;
    border: 1px solid #000;
    background-image: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");
    background-size: 50px;
  }
  .a {background-repeat: repeat space;}  /* 水平 rpeat，垂直 space */
  .b {background-repeat: space round;}   /* 水平 space，垂直 round */
  .c {background-repeat: repeat round;}  /* 水平 rpeat，垂直 round */
</style>

background-attachment 背景图片固定

background-attachment 可以设定背景图片“是否跟随视窗或元素内容而卷动”，没有继承特性，具有下列属性值：

设定 fixed 属性值之后背景图是以 body 作为参考，类似在 body 套用背景图，因此如果 background-size 设定为 cover、contain 或百分比数值，也是以 body 的尺寸为依据缩放，要特别注意。

下方范例会使用三个 div，分别呈现不同的 background-attachment 效果，当中使用了 overflow: scroll; 样式让 main 和 div 在“内容超出范围”时可以卷动，所以可以使用鼠标分别卷动 main 和 div 元素，卷动时就能观察背景固定或跟随卷动的状态，此外，设定 fixed 的 div，背景图是根据 body 元素做定位。

线上展示：https://codepen.io/oxxo/pen/MWMYMWq

<!-- HTML 程式碼 -->
<main>
  <div class="a">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
  <div class="b">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
  <div class="c">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
</main>

<!-- CSS 程式碼 -->
<style>
  main {
    width: 500px;
    height: 200px;
    padding: 5px;
    border: 1px solid #000;
    overflow: scroll;  /* 設定內容超出範圍就捲動 */
    background: #fff9;
  }
  div {
    float: left;       /* 靠左浮動 */
    width: 120px;
    height: 300px;
    border: 1px solid #000;
    margin: 5px;
    padding: 5px;
    font-size: 14px;
    color: #fff;
    overflow: scroll;  /* 設定內容超出範圍就捲動 */
    background-image: url("https://steam.oxxostudio.tw/image/index-css.jpg");
  }
  .a {background-attachment: scroll;}
  .b {background-attachment: fixed;}
  .c {background-attachment: local;}
</style>

小结

background-repeat 和 backgroud-attachment 都是网页设计中常见的背景处理技巧，不论是个人网页或是大型公司的网页，都会充分运用这些样式来让背景图更有特色。

意见反馈