CSS 基于文字的圖檔馬賽克你見過嗎

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

前置知識點

實作此效果需要了解 2 個前置的 CSS 知識點，濾鏡

filter

屬性中的

contrast

和

mix-blend-mode

屬性。

filter: contrast

filter

屬性相信都有所觸過，比如常見的

blur()

函數用于高斯模糊圖檔。除此之外還有很多其他函數可用，如下表所示：

Filter	描述
blur(px)	給圖像設定高斯模糊
brightness(%)	将線性乘法器應用于輸入圖像，使其看起來或多或少地變得明亮
contrast(%)	調整圖像的對比度
drop-shadow()	給圖像設定一個陰影效果
grayscale(%)	将圖像轉換為灰階圖像
hue-rotate(deg)	給圖像應用色相旋轉
invert(%)	反轉輸入圖像
opacity(%)	轉化圖像的透明程度
saturate(%)	轉換圖像飽和度
sepia(%)	将圖像轉換為深褐色
url()	擷取指向 SVG 濾鏡的 URI，該 SVG filter 可以嵌入到外部 XML 檔案中

今天主要用到的是

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%;
}
           

最後

參考

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