CSS 基於文字的圖片馬賽克你見過嗎

看到封面這張圖，是不是如同藝術品一般，第一次看到這張圖時，是比較震驚的，迫不及待的研究其原始碼是如何實現的，最後更為驚奇的是隻需要純 CSS 即可實現，接下來就展開說明實現過程。

前置知識點

實現此效果需要了解 2 個前置的 CSS 知識點，濾鏡filter屬性中的contrast和mix-blend-mode屬性。

filter: contrast

filter屬性相信都有所觸過，比如常見的blur()函式用於高斯模糊圖片。除此之外還有很多其他函式可用，如下表所示：

今天主要用到的是contrast，用於調整影像的對比度。如下圖所示，右側圖片是增加了filter: contrast(50%)的效果。

瀏覽器相容情況如下所示：

mix-blend-mode

mix-blend-mode該 CSS 屬性作用是讓元素內容和這個元素的背景以及下面的元素髮生“混合”。設定不同 mix-blend-mode 值的效果如下所示：

具體含義解釋如下：

• multiply混合後通常顏色會加深，多用在白色背景圖片和其他元素的混合，以及彩色紋理的合併上。
• screen 混合後顏色會減淡，非常適合實現霓虹燈光效果，適合黑色背景素材和其他元素混合，非常實用。
• overlay 在顏色值暗的時候，採用了類似“正片疊底”的演算法，而顏色亮的時候，採用了類似“濾色”的演算法。此混合模式比較適合實現文字水印效果。
• darken表示哪個顏色暗使用哪個顏色，在 web 開發中，給圖形或文字著色會很實用。
• lighten是哪個顏色淺就表現為哪個顏色，在 web 開發中，給圖形或文字著色會很實用。
• color-dodge顏色減淡混合模式可以用來保護底圖的高光，適合處理高光下的人物照片。
• color-burn顏色加深混合模式可以用來保護底圖的陰影，適合處理幽深祕境一類的照片，通過和特定的色彩進行混合，可以營造更加幽深的意境。
• hard-light的效果是強光，最終的混合效果就好像耀眼的聚光燈照射過來，表現為影像亮的地方更亮，暗的地方更暗。多用在影像表現處理上。
• soft-light的效果是柔光，最終的混合效果就好像發散的光源瀰漫過來，表現效果和 hard-light 有類似之處，只是表現沒有那麼強烈。給影像著色的時候常用此混合模式。
• difference是差值效果，可以實現顏色的反色效果。
• exclusion的效果是排除，最終的混合效果和 difference 模式是類似的，區別在於 exclusion 的對比度要更低一些。

接下來要介紹的 4 種混合模式都屬於顏色系混合模式，在 web 開發中不常用，還是傳統的影像表現處理領域用的較多。

• hue表示色調混合，最終的效果是混合後的顏色使用底層元素的亮度和飽和度，而使用上層元素的色調。
• saturation表示飽和度混合，混合後的顏色保留底圖的亮度和色調，使用頂圖的飽和度。
• color表示顏色混合，混合後的顏色保留底圖的亮度，使用頂圖的色調和飽和度。
• luminosity表示亮度混合，混合後的顏色保留底圖的色調和飽和度，使用頂圖的亮度，和 color 模式正好是相反的。

瀏覽器相容情況如下所示：

程式碼開發

今日主圖的效果主要就是用到了濾鏡filter屬性中的contrast和mix-blend-mode屬性中的multiply。

為了達到效果的同時也能閱讀文字，所以設定圖片的對比圖filter: contrast(60%)。再將整個文字設定絕對定位置於圖片上方，並設定mix-blend-mode: multiply即可達到圖片所示的效果。核心程式碼如下所示：

<div>
  <img src="https://xxx.jpeg">
  <p>
  ***
  文字內容
  ***
  </p>
</div>

CSS 程式碼：

div {
  position: relative; 
  overflow: hidden;
}
img {
  width: 100%;
  filter: contrast(60%);
}
p {
  line-height: 1;
  font-size: 1.76vw;
  color: #fff;
  background: #000;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

經過處理後的下圖你能不看原始碼猜到是哪位明星嗎？

最後

今日只用到了 filter 和 mix-blend-mode 的一個屬性，還很很多的功能等著你去發現，有興趣的同學可以嘗試用起來吧，CSS 的世界等著你來發掘～ 看完如果覺得有用，記得點個贊再走，收藏起來說不定哪天就用上啦～

專注前端開發，分享前端相關技術乾貨，公眾號：南城大前端（ID: nanchengfe）

參考

• mix-blend-mode
• filter
• CSS3 混合模式 mix-blend-mode 簡介