??CSS 中文開發手冊

混合模式 | blend-mode (Compositing & Blending) - CSS 中文開發手冊

<blend-mode>這個詞關鍵是一組描述混合模式的類型。

混合模式是當層重疊時計算像素最終顏色值的方法，每種混合模式采用前景和背景顏色值（分別為頂部顏色和底部顏色），執行其計算并返回顏色值。最終的可見層是對混合層中的每個重疊像素執行混合模式計算的結果。

語法

使用一個簡單的值定義混合模式。

值

normal

不管底部的顏色是什么，最終的顏色是頂部的顏色。

效果類似于兩張不透明的紙張重疊。

multiply

該效果類似于在透明膜重疊上印刷的兩個圖像。黑色層導致黑色最終層，白色層導致無變化。

黑色層導致黑色最終層，白色層導致無變化。

該效果類似于在透明膜重疊上印刷的兩個圖像。

screen

最終的顏色是反轉顏色，將它們相乘，并反轉該值的結果。

效果類似于照射到投影屏幕上的兩個圖像，黑色層導致無變化，白色層導致白色最終層。

效果類似于照射到投影屏幕上的兩個圖像。

overlay最終的顏色是multiply底部顏色較深或者screen底部顏色較淺的結果。

這種混合模式相當于hard-light交換圖層。

darken

最終顏色是由每個顏色通道的最暗值組成的顏色。

lighten

最終顏色是由每個顏色通道的最亮值組成的顏色。

color-dodge

最終顏色是將底部顏色除以頂部顏色的倒數的結果。

黑色前景導致沒有變化。具有背景的反色的前景將導致完全亮起的顏色。

這種混合模式類似于屏幕，但前景只需要像背景的反轉一樣輕，以達到完全亮起的顏色。

color-burn

將值除以頂部顏色，并反轉該值的結果。

一個白色的前景沒有變化，具有背景的反色的前景導致黑色最終圖像。

這種混合模式類似于乘法，但是前景只需要像背景的反轉一樣暗，以使最終圖像變黑。

hard-light

最后的顏色是multiply如果頂部顏色更深，或者screen如果上面的顏色是淺色的結果。

這種混合模式相當于overlay交換圖層。

其效果類似于在背景下閃耀著強烈的聚光燈。

soft-light

最終顏色與hard-light相似，最終顏色比較柔和。

??本文標題：混合模式 | blend-mode (Compositing & Blending) – CSS 中文開發手冊 - Break易站轉載請保留頁面地址：https://www.breakyizhan.com/css/32095.html

總結

以上是生活随笔為你收集整理的混合模式 | blend-mode (Compositing &amp; Blending)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。