CSS background-blend-mode 属性

CSS background-blend-mode 语法

在 CSS 中，background-blend-mode 属性用于定义 “背景图片” 与 “背景颜色” 如何相互混合。

语法：

background-blend-mode: 关键字;

说明：

background-blend-mode 的取值有很多，常用的如下表所示。

background-blend-mode 属性取值
取值	说明
normal（默认值）	正常混合，background-color 不会渗入 background-image
multiply	背景图像和背景颜色相乘，会导致背景图像比以前更暗
screen	背景图像和背景颜色都被反转和相乘，然后再次反转
overlay	背景图像和背景颜色混合，以反映背景的明暗
darken	如果背景图像比背景颜色更暗，则替换图像，否则保持原样
lighten	如果背景图像比背景颜色更浅替换图像，否则保持原样
color-dodge	背景颜色除以背景图像的反面，这与屏幕混合模式非常相似
color-burn	背景颜色反转再除以背景图像，然后再反转。
hard-light	如果背景图像比背景颜色浅，则使用 multiply 模式，否则使用 screen 模式
soft-light	最终结果与 hard-light 相似，因为它看起来像是将漫射聚光灯放置在图像上
difference	通过减去背景图像的较深颜色和从最浅的图像中减去背景颜色的结果。通常，图像将具有非常高的对比度。
exclusion	结果与 difference 非常相似，但对比度略低
hue	结果是背景图像的色调与背景颜色的亮度和饱和度相结合。
saturation	保持背景图像的饱和度，同时混合背景颜色的色调和亮度。
color	保持背景图像的色调和饱和度以及背景颜色的亮度。在此示例中，由于图像是灰色的，并且效果保留了灰度级别，因此我们得到的只是一个大的灰色斑点。
luminosity	在使用背景色的饱和度和色调的同时，保留顶部颜色的亮度。

提示: 目前的 background-blend-mode 属性更多是用于 CSS 的背景纹理，它在实际开发中用得并不多，只需简单了解即可。

CSS background-blend-mode 摘要

属于	CSS 背景
使用频率	低
是否继承	否
默认值	normal
兼容性	查看
官方文档	查看
MDN	查看

CSS background-blend-mode 示例

接下来，我们通过一个简单的例子来讲解一下 CSS background-blend-mode 属性是如何使用的。

示例：background-blend-mode 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            background-image: url(./imgs/frog-small.jpg);
            background-repeat: no-repeat;
            background-blend-mode: normal;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

background-blend-mode 示例

分析：

如果使用的是 background-blend-mode: multiply;，此时页面效果如下图所示。

background-blend-mode: multiply; 的效果

如果使用的是 background-blend-mode: screen;，此时页面效果如下图所示。

background-blend-mode: screen; 的效果

当然了，小伙伴们也可以自行试一下其他取值，然后看看实际效果如何。