CSS3之mix-blend-mode

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/52325.html

相關(guān)文章

CSS3之mix-blend-mode

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

stdying 2019-08-29 15:19 評論0 收藏0
CSS3之mix-blend-mode

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

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

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

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

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

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

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

gougoujiang 2019-08-30 15:54 評論0 收藏0