??CSS 中文開發(fā)手冊(cè)

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

<blend-mode>這個(gè)詞關(guān)鍵是一組描述混合模式的類型。

混合模式是當(dāng)層重疊時(shí)計(jì)算像素最終顏色值的方法，每種混合模式采用前景和背景顏色值（分別為頂部顏色和底部顏色），執(zhí)行其計(jì)算并返回顏色值。最終的可見層是對(duì)混合層中的每個(gè)重疊像素執(zhí)行混合模式計(jì)算的結(jié)果。

語法

使用一個(gè)簡(jiǎn)單的值定義混合模式。

值

normal

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

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

multiply

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

黑色層導(dǎo)致黑色最終層，白色層導(dǎo)致無變化。

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

screen

最終的顏色是反轉(zhuǎn)顏色，將它們相乘，并反轉(zhuǎn)該值的結(jié)果。

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

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

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

這種混合模式相當(dāng)于hard-light交換圖層。

darken

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

lighten

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

color-dodge

最終顏色是將底部顏色除以頂部顏色的倒數(shù)的結(jié)果。

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

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

color-burn

將值除以頂部顏色，并反轉(zhuǎn)該值的結(jié)果。

一個(gè)白色的前景沒有變化，具有背景的反色的前景導(dǎo)致黑色最終圖像。

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

hard-light

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

這種混合模式相當(dāng)于overlay交換圖層。

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

soft-light

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

??本文標(biāo)題：混合模式 | blend-mode (Compositing & Blending) – CSS 中文開發(fā)手冊(cè) - Break易站轉(zhuǎn)載請(qǐng)保留頁(yè)面地址：https://www.breakyizhan.com/css/32095.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。