CSS3之mix-blend-mode

leanxi 發(fā)布于2019-08-02 10:24 / 1390人閱讀

摘要：在線編輯屬性描述了元素的內(nèi)容應(yīng)該與元素的直系父元素的內(nèi)容和元素的背景如何混合。正常正片疊底濾色疊加變暗變亮顏色減淡顏色加深強(qiáng)光柔光差值排除色相飽和度顏色亮度初始繼承復(fù)原在線編輯參考資料原文地址

在線編輯demo

屬性描述了元素的內(nèi)容應(yīng)該與元素的直系父元素的內(nèi)容和元素的背景如何混合。

mix-blend-mode: normal;          //正常mix-blend-mode: multiply;        //正片疊底
mix-blend-mode: screen;          //濾色
mix-blend-mode: overlay;         //疊加
mix-blend-mode: darken;          //變暗
mix-blend-mode: lighten;         //變亮
mix-blend-mode: color-dodge;     //顏色減淡
mix-blend-mode: color-burn;      //顏色加深
mix-blend-mode: hard-light;      //強(qiáng)光
mix-blend-mode: soft-light;      //柔光
mix-blend-mode: difference;      //差值
mix-blend-mode: exclusion;       //排除
mix-blend-mode: hue;             //色相
mix-blend-mode: saturation;      //飽和度
mix-blend-mode: color;           //顏色
mix-blend-mode: luminosity;      //亮度
mix-blend-mode: initial;         //初始
mix-blend-mode: inherit;         //繼承
mix-blend-mode: unset;           //復(fù)原

在線編輯demo

參考資料：

MDN: mix-blend-mode
原文地址

GPU云服務(wù)器云服務(wù)器 mix-blend-mode css3 css3氣泡 css3動(dòng)畫

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52325.html

相關(guān)文章

CSS3之mix-blend-mode

摘要：在線編輯屬性描述了元素的內(nèi)容應(yīng)該與元素的直系父元素的內(nèi)容和元素的背景如何混合。正常正片疊底濾色疊加變暗變亮顏色減淡顏色加深強(qiáng)光柔光差值排除色相飽和度顏色亮度初始繼承復(fù)原在線編輯參考資料原文地址 showImg(https://segmentfault.com/img/remote/1460000014766135); 在線編輯demo 屬性描述了元素的內(nèi)容應(yīng)該與元素的直系父元素的內(nèi)容...

stdying 2019-08-29 15:19 評(píng)論0 收藏0
CSS3之mix-blend-mode

摘要：屬性描述了元素的內(nèi)容應(yīng)該與元素的直系父元素的內(nèi)容和元素的背景如何混合。正常正片疊底濾色疊加變暗變亮顏色減淡顏色加深強(qiáng)光柔光差值排除色相飽和度顏色亮度初始繼承復(fù)原屬性描述了元素的內(nèi)容應(yīng)該與元素的直系父元素的內(nèi)容和元素的背景如何混合。 mix-blend-mode: normal; /...

wangjuntytl 2021-11-23 09:51 評(píng)論0 收藏0
CSS3學(xué)習(xí)小結(jié)

摘要：看到人家實(shí)現(xiàn)的實(shí)在是太棒了，就想到該學(xué)學(xué)了。屬性用來查詢?yōu)g覽器是否支持新特性。還有語句，不支持的時(shí)候執(zhí)行。還支持多個(gè)條件塊，，，。瀏覽器支持情況只有，，的支持情況比較好。這幾日在http://lab.iamvdo.me/houdini/看到了很炫酷的CSS實(shí)現(xiàn)?？吹饺思覍?shí)現(xiàn)的實(shí)在是太棒了，就想到該學(xué)學(xué)CSS了。 @support屬性 @support:用來查詢?yōu)g覽器是否支持css新特...

WrBug 2019-08-29 13:47 評(píng)論0 收藏0
CSS > CSS3 中的層疊上下文初探

摘要：但該盒不建立新的層疊上下文，除非是根元素。以上是基于的層疊上下文介紹。同級(jí)情況下，按照二者在源代碼中的順序，居后的又重新占領(lǐng)高地了?，F(xiàn)在我們看以下源代碼這個(gè)時(shí)候，以視口為包含塊進(jìn)行定位和大小計(jì)算，將會(huì)鋪滿整個(gè)屏幕。前言：關(guān)于層疊上下文，筆者還沒有去閱讀更詳細(xì)的 W3C 規(guī)范來了解更本質(zhì)的原理（表打我，等我校招拿到 offer 了我就讀好伐 T_T）。一直聽說 CSS3 里的層疊上下文...

pcChao 2019-08-28 18:18 評(píng)論0 收藏0
mix-blend-mode及background-blend-mode實(shí)現(xiàn)炫酷的圖片樣式

摘要：在網(wǎng)上看到了有如相機(jī)功能的實(shí)現(xiàn)比較好看的圖片樣式，自己也想弄下，在這里記錄下效果圖相關(guān)屬性正常正片疊底濾色疊加變暗變亮顏色減淡顏色加深強(qiáng)光柔光差值排除色相飽和度顏色在網(wǎng)上看到了有如相機(jī)功能的mix-blend-mode實(shí)現(xiàn)比較好看的圖片樣式，自己也想弄下，在這里記錄下 1.效果圖 showImg(https://segmentfault.com/img/bVblsM0?w=726&...

gougoujiang 2019-08-30 15:54 評(píng)論0 收藏0