CSS中的background-blend-mode
属性可以设置多种背景混合模式,包括:
normal
:正常模式,没有混合效果,为默认值。multiply
:将背景图像的颜色值与上层图像的颜色值相乘。screen
:将背景图像的颜色值与上层图像的颜色值相减,然后对差值取反。overlay
:根据上层图像的颜色值来调整背景图像的颜色值,增加对比度。darken
:比较背景图像和上层图像,选取较暗的颜色。lighten
:比较背景图像和上层图像,选取较亮的颜色。color-dodge
:将上层图像的颜色值分成两部分,然后将背景图像的颜色值除以较小的值(避免除数为0),最后将商作为新的颜色值。color-burn
:将上层图像的颜色值分成两部分,然后将背景图像的颜色值除以较大的值(避免除数为0),最后将差作为新的颜色值。hard-light
:根据上层图像的颜色值来调整背景图像的颜色值,增加对比度。soft-light
:根据上层图像的颜色值来调整背景图像的颜色值,柔和颜色。difference
:将背景图像的颜色值与上层图像的颜色值相减,然后取绝对值。exclusion
:将背景图像的颜色值与上层图像的颜色值相加,然后减去两者的乘积,再将结果取反。此外,还可以通过background-blend-mode
属性设置多个背景混合模式,以逗号分隔。比如:
background-blend-mode: multiply, screen;
以上是关于background-blend-mode
属性可以设置的背景混合模式的介绍。