背景图 ( 多重背景、混合 )

所有的背景图片 CSS 样式都支援“多重背景”的设定，运用多重背景的方法，就能让原本只能使用单一背景的样式，变成多张背景的特殊效果，此外，也会使用 background-blend 的样式属性，让不同元素之间的背景产生特别的混合效果。

快速导览：

• 多重背景
• background-blend-mode 背景混合模式

教学影片

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

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

多重背景

所有的背景图片 CSS 样式都支援“多重背景”的设定，只要使用“逗号 ,”分隔不同的背景与背景属性，就能呈现多重背景效果，虽然使用多重背景很简单，但仍需要注意下列事项：

• background-color 不支援多重背景。
• 多个属性值里只要有一个写错，会造成整个样式失效 ( 使用默认值呈现 )。
• 如果不同样式间属性值数量不同，多出来的背景属性会从属性值少的第一项开始重复套用。

下方范例会替 div 加入“两张图片”作为背景图，其中一张使用透明色背景，并分别设定两张背景图片的尺寸和重复样式。

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

<!-- HTML 程式碼 -->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 300px;
    height: 200px;
    border: 1px solid #000;
    background-image:
      url("https://steam.oxxostudio.tw/download/css/function-filter-demo.png"),
      url("https://steam.oxxostudio.tw/image/index-css.jpg");
    background-size: 70px, 50px;
    background-repeat: space, round;
  }
</style>

如果不同样式间属性值数量不同，多出来的背景属性会从属性值少的第一项开始重复套用，下方范例中 background-image 设定了三张背景图，但 background-size 和 background-repeat 却只设定了两个属性值，因此第三张背景图就会使用两个属性值的第一个。

第一张使用第一个，第二张使用第二个，第三张因为没有第三个，所以从第一个开始重复套用。

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

<!-- HTML 程式碼 -->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    background-image:
      url("https://cdn-icons-png.freepik.com/16/11694/11694600.png"),
      url("https://steam.oxxostudio.tw/download/css/function-filter-demo.png"),
      url("https://steam.oxxostudio.tw/image/index-css.jpg");
    background-size: 55px, 100px;
    background-repeat: space, repeat-x;
  }
</style>

有别于 HTML 文件元素结构里“越下方元素”，在图层结构中会摆在越上层，多重背景图片写在“越前方的背景图片”，在图层结构中则会摆在的越上层，下方范例中的第一个 div 里使用 img 元素，放在后方的元素会盖住前方的元素，但第二个 div 的多重背景图，则是放在前方的背景图盖住放在后方的背景图。

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

<!-- HTML 程式碼 -->
<div class="a">
  <img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
  <img src="https://steam.oxxostudio.tw/image/index-css.jpg">
</div>
<div class="b"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 150px;
    border: 1px solid #000;
    margin: 10px;
    overflow: hidden;
    position: relative;
  }
  .a img{
    position: absolute;
    width: 120px;
  }
  .b {
    background-image:
      url("https://steam.oxxostudio.tw/download/css/function-filter-demo.png"),
      url("https://steam.oxxostudio.tw/image/index-css.jpg");
    background-size: 60px, 50px;
    background-repeat: space, round;
  }
</style>

background-blend-mode 背景混合模式

background-blend-mode 可以设定背景图片“混合模式”，没有继承特性，混合模式就如同 PhotoShop 等图像处理软件的图层混合模式，使用不同的算法，将每个像素不同的色彩或亮度进行混合，CSS 的混合模式提供下列的属性值：

下方范例使用不同的 div，呈现“渐层色”和“背景图”的不同混合效果。

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

<!-- HTML 程式碼 -->
<div class="a"><span>normal</span></div>
<div class="b"><span>multiply</span></div>
<div class="c"><span>screen</span></div>
<div class="d"><span>overlay</span></div>
<div class="e"><span>darken</span></div>
<div class="f"><span>lighten</span></div>
<div class="g"><span>color-dodge</span></div>
<div class="h"><span>color-burn</span></div>
<div class="i"><span>hard-light</span></div>
<div class="j"><span>soft-light</span></div>
<div class="k"><span>difference</span></div>
<div class="l"><span>exclusion</span></div>
<div class="m"><span>hue</span></div>
<div class="n"><span>saturation</span></div>
<div class="o"><span>color</span></div>
<div class="p"><span>luminosity</span></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    float: left;
    margin: 5px 5px 30px 5px;
    position: relative;
    background-size: cover;
    background-image:
      repeating-linear-gradient(yellow 0%,  black 20%),
      url("https://steam.oxxostudio.tw/download/css/function-filter-demo.png");
    
  }
  div span{
    display: block;
    position: absolute;
    width: 100%;
    bottom: -25px;
    text-align: center;
  }
  .a {background-blend-mode: normal;}
  .b {background-blend-mode: multiply;}
  .c {background-blend-mode: screen;}
  .d {background-blend-mode: overlay;}
  .e {background-blend-mode: darken;}
  .f {background-blend-mode: lighten;}
  .g {background-blend-mode: color-dodge;}
  .h {background-blend-mode: color-burn;}
  .i {background-blend-mode: hard-light;}
  .j {background-blend-mode: soft-light;}
  .k {background-blend-mode: difference;}
  .l {background-blend-mode: exclusion;}
  .m {background-blend-mode: hue;}
  .n {background-blend-mode: saturation;}
  .o {background-blend-mode: color;}
  .p {background-blend-mode: luminosity;}
</style>

小结

CSS 的多重背景是许多网页设计常用的技巧，不仅可以减少 HTML 里图片元素的使用，更能实现许多有趣的效果，不妨立刻在自己的网站中加入多重背景吧！

意见反馈