CSS 漸層色文字、雙色文字、圖片背景文字

這篇教學會使用 CSS 的裁切背景 background-clip 樣式屬性，產生漸層色文字、雙色文字和圖片背景文字等效果，最後還會搭配動畫 animation 做出有趣的漸層色文字動畫和淡出淡出動畫。

快速導覽：

• 使用 background-clip 製作文字背景效果
• background-clip 應用於多行文字
• 雙色文字動畫效果

使用 background-clip 製作文字背景效果

CSS background-clip 樣式屬性如果設定為 text，可以將背景裁切成內容文字的形狀，只要將文字原本的顏色設定為「透明色」，就可以產生具有各種特別背景色的文字，下方範例會產生漸層色文字、雙色文字以及圖片背景文字。

參考：background-clip 裁切背景

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

<!-- HTML 程式碼 -->
<h1 class="a0">OXXO.STUDIO</h1>
<h1 class="a1">OXXO.STUDIO</h1>
<h1 class="a2">OXXO.STUDIO</h1>
<h1 class="a3">OXXO.STUDIO</h1>

<!-- CSS 程式碼 -->
<style>
  h1 {
    margin: 10px;
    padding: 0;
    width: max-content;
    font-family: impact, arial-black;  /* 設定成比較粗的字體 */
    font-size: 80px;
    line-height: 1;
  }
  /* 沒有設定 background-clip 就不會進行裁切 */
  .a0 { 
    background: linear-gradient(#f00,#f90,#fd0,#0c0,#09f);
  }
  .a1 {
    color: #0000;           /* 文字顏色設定為透明 */
    background: linear-gradient(#f00,#f90,#fd0,#0c0,#09f);
    background-clip: text;  /* 設定背景裁切為文字形狀 */
  }
  .a2 {
    color: #0000;           /* 文字顏色設定為透明 */
    background: linear-gradient(#f00 50%,#fa0 50%);
    background-clip: text;  /* 設定背景裁切為文字形狀 */
  }
  .a3 {
    color: #0000;           /* 文字顏色設定為透明 */
    background: url(https://steam.oxxostudio.tw/image/index-css.jpg);
    background-clip: text;  /* 設定背景裁切為文字形狀 */
  }
</style>

background-clip 應用於多行文字

background-clip 會裁切整個背景，如果有「多行文字」，不同行的文字會出現不同的背景，由於這種特性，只要特別指定背景漸層色的位置，就能讓不同行的的文字變成不同顏色的效果，下方範例的第二組 p 文字，將漸層背景分成五等份，就能讓五行文字呈現不同顏色。

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

<!-- HTML 程式碼 -->
<p class="p1">STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域</p>
<p class="p2">STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域</p>

<!-- CSS 程式碼 -->
<style>
  p {
    margin: 10px;
    width: 300px;
    font-size: 24px;
    color: #0000;  /* 文字顏色設定為透明 */  
  }
  .p1 {
    background: linear-gradient(#f00,#f90,#fd0,#0c0,#09f);
    background-clip: text;
  }
  .p2 {
    /* 指定漸層色中每個顏色的位置 */
    background: linear-gradient(#f00 20%,
      #f90 20%, #f90 40%,
      #fd0 40%, #fd0 60%,
      #0c0 60%, #0c0 80%,
      #09f 80%);
    background-clip: text;
  }
</style>

雙色文字動畫效果

透過自訂屬性 @property 產生背景的漸層色動畫，就可以讓文字具有顏色變幻的動畫效果，下方範例呈現雙色背景旋轉以及從上到下淡出的文字效果。

參考：CSS @property 自訂屬性值。

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

<!-- HTML 程式碼 -->
<h1>OXXO.STUDIO</h1>
<p>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</p>

<!-- CSS 程式碼 -->
<style>
  /* 自訂義角度屬性 */
  @property --deg {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
  }
  h1 {
    margin: 10px;
    padding: 0;
    width: max-content;
    font-family: impact, arial-black;  /* 設定成比較粗的字體 */
    font-size: 80px;
    line-height: 1;
    color: #0000;                      /* 文字顏色設定為透明 */
    background: linear-gradient(var(--deg), #f00 50%, #000 50%); /* 套用角度自訂屬性 */
    background-clip: text;
    animation: a 2s linear infinite;   /* 動畫 */
  }       
  /* 動畫改變自訂屬性數值 */
  @keyframes a {
    0%{--deg: 0deg;}
    100%{--deg: 360deg;}
  }
  /* 自訂義百分比屬性 */
  @property --p1 {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 100%;
  }
  /* 自訂義百分比屬性 */
  @property --p2 {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 100%;
  }
  p {
    margin: 30px;
    width: 320px;
    font-size: 24px;
    color: #0000;           /* 文字顏色設定為透明 */  
    background: linear-gradient(to top, #fff var(--p1), #000 var(--p2), #000 100%); /* 套用百分比自訂屬性 */
    background-clip: text;
    animation: b 2s linear infinite alternate;   /* 動畫 */
  }       
  /* 動畫改變自訂屬性數值 */
  @keyframes b {
    0%{
      --p1: 100%;
      --p2: 100%;
    }
    50%{
      --p1: 0%;
      --p2: 50%;
    }
    100%{
      --p1: 0%;
      --p2: 0%;
    }
  }
</style>

小結

background-clip 是一個比較新的樣式屬性，只要運用這篇教學的做法，就能輕鬆做出各種非常有特色的文字囉。

意見回饋

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