次世代 Hugo

無駄を削ぎ、本質を研ぐ

實作圖片灰階效果

Sam Xiao's Avatar 2021-04-12

若要對影像實作灰階效果，可使用 :before 搭配 mix-blend-mode: color 實現。

Version

CSS 3

Image Effect

gray000

彩色圖片改以灰階顯示。

<template>
  <figure class="effect-box">
    <img src="https://picsum.photos/300/200/?random=10" alt="scenery">
  </figure>
</template>

<style scoped>
.effect-box {
  display: flex;
  width: fit-content;
  margin: 0;
  position: relative;
}

.effect-box:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #939393;
  mix-blend-mode: color;
}
</style>

第 2 行

<figure class="effect-box">
  <img src="https://picsum.photos/300/200/?random=10" alt="scenery">
</figure>

由於要使用新的 layer 使用 absolute position，因此在 <img> 外需有一個 container 可用 relative position。

雖然也可使用 <div>，但由於是 <img>，使用 HTML 5 的 <figure> 語意更佳

第 8 行

.effect-box {
  display: flex;
  width: fit-content;
  margin: 0;
  position: relative;
}

設定父層 box style：

  • display: flex：使 <figure> 高度能內縮至 <img> 高度
  • width: fit-content：使 <figure> 寬度能內縮至 <img> 寬度
  • margin: 0：設定 <figure> 的 margin
  • position: relative：即將使用 :before 新增一層 layer 為 absolute position，設定成 relative position 使之以此為定位基準

15 行

.effect-box:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #939393;
  mix-blend-mode: color;
}

使用 :before 對圖片進行灰階效果：

  • content: ''：為了能使用 :before 建立新 layer，儘管沒有任何內容，content 仍要設定 empty string，否則無法使用 :before
  • position: absolute：設定使用 absolute position
  • width: 100%：設定寬度與 <figure> 同寬
  • height: 100%：設定高度與 <figure> 同高
  • top: 0：設定上緣與 <figure> 對齊
  • left: 0：設定左側與 <figure> 對齊
  • background: #939393：設定背景顏色為 灰色
  • mix-blend-mode: color：設定背景顏色與 <img> 混色產生灰階效果

Conclusion

  • <img> 外層 container 也可使用 <div>，但 <img> 使用 HTML 5 的 <figure> 語意更佳
  • 仍然是常用的藉由 :before 或 :after 新增 layer，然後透過 relative postion 與 absolute position 合作產生效果，這是 :before 與 :after 慣用 pattern

Reference

lubnadev, CSS Use Cases - ::before & ::after

# CSS