CSS保健室|mix-blend-mode


Posted by itiswonderfall on 2021-11-17

mix-blend-mode

上次講了 background-blend-mode ,這次換 mix-blend-mode ,一樣讓想像力變成超能力,把 mix-blend-mode 想成是一隻變色龍,不只背景,周遭的人事物都有可能會影響到牠,噓!走路小聲點不要嚇到牠了,接下來讓你更深入了解這個屬性!

cover

圖片來源

目前 IE 瀏覽器不支持 mix-blend-mode 屬性。

mix-blend-mode 這種混合模式就如同 Photoshop 中的「 圖層混合模式 」,會與下層圖層的色彩進行混合,默認情況下是會混合所有比層疊順序低的元素,它是應用於多個元素,而且除背景外,元素內的文字等其他內容也會被混合,也可以這樣理解,它會把當前元素和所有在其下方重疊的背景或元素都混和起來。

background-blend-mode 是應用在單個元素的背景之間( background 裡面 ), 它還支持多背景混合,可以把 background 想像是一台果汁機,只會攪和機器內的食物,不會被外面的一切干擾到,而 mix-blend-mode 則是應用於多個元素,除背景外,元素內的文字等其他內容也會被混合。

mix-blend-mode 比較類似 opacity ,作用於一個元素的同時也會作用於這個元素的全部子元素,因此,如果不想要子元素內容也受到影響( 就像設置半透明時可能希望裡面的文字仍是不透明的 ),改用 background-blend-mode 會更合適。


圖片來源

上圖是 PS 中的混合模式,數量比 CSS 中的多出幾個,但 CSS 已經能夠在各種不同的模式中演算出多達 16 種效果,如上圖粉紅色的字。

background-blend-mode 及 mix-blend-mode 這兩種混合模式的值是相同的。

 


 

HTML

<div>
    <img src="img.jpg">
</div>

CSS

div {
    background-color: navy;
    padding: 20px;
}
div > img {
    mix-blend-mode: 
      normal | multiply | screen | overlay | 
      darken | lighten | color-dodge | color-burn | 
      hard-light | soft-light | difference | exclusion | 
      hue | saturation | color | luminosity;
}

下面有 花朵圖片藍色背景 的混和範例:

描述 範例
normal
( 一般 )
為屬性預設的值,沒有被混合只選擇上層圖層的顏色。 normal
multiply
( 色彩增值 )
將背景以及來源色彩( 上層圖片 )的顏色相乘,並替換掉原本的顏色,結果色會比來源色或目標色暗。
將任何色與黑色相乘結果為黑色,將任何色與白色相乘則維持原來的顏色。
multiply
screen
( 濾色 )
將背景以及來源色的補值相乘,得到補色相乘的結果,結果色會比背景或來源色還要亮。
將任何色過濾白色得到白色;將來源色過濾黑色則結果不變。
效果近似於將好幾個投影片投影在單一個投影幕上。
screen
overlay
( 覆蓋 )
相乘或過濾顏色,取決於背景的顏色值。
當來源色過濾背景時保留原本的強光以及陰影,背景顏色並非被取代,而是與來源色混合展現背景的亮部或暗部。
overlay
darken
( 變暗 )
保留背景以及來源色彩中較暗的色彩。
背景會與來源色彩中較暗的顏色混合。
darken
lighten
( 變亮 )
保留背景以及來源色彩中較亮的顏色。
背景會與來源色彩中較亮的顏色混合。
lighten
color-dodge
( 加亮顏色-減淡 )
將背景加亮來展現來源色。
如果背景為黑色不會有任何改變。
color-dodge
color-burn
( 加深顏色 )
減低背景色亮度反映出來源色。
如果背景為白色不會有任何改變。
color-burn
hard-light
( 實光 )
將顏色相乘或過濾,取決於來源色的顏色值。
效果近似於強烈的聚光燈照在背景圖片上。
hard-light
soft-light
( 柔光 )
將顏色加深或加亮,取決於來源色的顏色值。
效果近似於漫射的聚光燈照在背景圖片上。
soft-light
difference
( 差異化 )
用亮色減去兩個來源色中的深色。
如果背景為白色則為反轉色,背景為黑色則不會有任何改變。
difference
exclusion
( 排除 )
效果近似於差異化但對比度較低。 exclusion
hue
( 色相 )
用來源色的色相創造出另一個顏色,結合背景原來的飽和度及亮度。 hue
saturation
( 飽和度 )
用來源色的飽和度創造出另一個顏色,結合背景原來的飽和度及亮度。
如果背景為灰階( 無飽和度 )的狀態下不會有任何效果。
saturation
color
( 顏色 )
用來源色的色相以及飽和度創造出另一個顏色,結合背景原來的亮度。
保留了背景的灰階,對於單色圖像的色彩化或是圖像的著色很有幫助。
color
luminosity
( 明度 )
用來源色的明度創造出另一個顏色,結合背景原來的色相及飽和度。
這與顏色模式的效果正好相反。
luminosity

 


 

使用 mix-blend-mode 製作文字背景圖

圖片來源

可以嘗試讓文字帶上漸變色,或者說讓文字透出圖片,當然這個效果有一些 CSS 屬性也可以完成,譬如 background-clip: text 背景裁剪就可以讓文字帶上漸變色或者展示圖片,而這裡是使用 mix-blend-mode ,只需要建構出黑色文字、白色底色的文字 div ,疊加上圖片,再運用 mix-blend-mode 即可,簡單原理如下:

HTML

<div class="container">
    <div class="pic"><div class="text">IMAGE</div></div>
</div>

CSS

.pic {
  position: relative;
  width: 100%;
  height: 100%;
  background: url('flowers.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
.text {
  position: absolute;
  width:100%;
  height:100%;
  color: #000;
  mix-blend-mode: lighten;
  background-color: #fff;
}

 


 

參考資料

  1. CSS mix-blend-mode-直接在網頁呈現Photoshop的圖層混合模式
  2. 不可思議的混合模式backgroundblendmode
  3. 《CSS3 mix-blend-mode 》網頁版的Photoshop圖層混合模式
  4. CSS mix-blend-mode Property

#css #css保健室 #background #mix-blend-mode







Related Posts

Why you should or shouldn't use Google DNS?

Why you should or shouldn't use Google DNS?

Git 筆記 - 將該次 commit 變動的檔案打包壓縮

Git 筆記 - 將該次 commit 變動的檔案打包壓縮

API

API


Comments