导航分类

CSS background-attachment 属性 CSS background-clip 属性

CSS background-blend-mode 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

background-blend-mode是 CSS 中用于定义元素的背景图像和背景颜色如何混合的属性。

background-blend-mode属性类似于 Photoshop 中的图层混合模式。

默认值：	normal
继承性：	否
可动画性：	否。请参阅：可动画属性。
版本：	CSS3
JavaScript 语法：	object.style.backgroundBlendMode="screen"

常用的实例

接下来通过多个实例演示background-blend-mode属性的用法，来深化您对background-blend-mode属性的理解。

1. 基本使用

multiply正片叠底，使背景变暗。

实例代码运行代码

复制

.element {
    background-image: url('image.jpg');
    background-color: blue;
    background-blend-mode: multiply;
}

2. 多背景混合

screen滤色和overlay叠加，两种模式混合。

实例代码运行代码

复制

.element {
    background-image: url('image1.jpg'), url('image2.jpg');
    background-blend-mode: screen, overlay;
}

3. 与渐变结合

overlay叠加模式，与渐变背景结合使用。

实例代码运行代码

复制

.element {
    background-image: linear-gradient(to right, red, blue), url('pattern.png');
    background-blend-mode: overlay;
}

CSS 语法

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

属性值

值	描述
`normal`	默认，不应用混合，背景层简单叠加。
`multiply`	正片叠底，将背景颜色/图像相乘，使结果变暗（类似油墨叠加）。
`screen`	滤色，将颜色反相后相乘再反相，使结果变亮（类似光线叠加）。
`overlay`	叠加，结合`multiply`和`screen`，暗区更暗，亮区更亮，增强对比度。
`darken`	变暗，保留两层中较暗的像素，即保留深色部分。
`lighten`	变亮，保留两层中较亮的像素，即保留浅色部分。
`color-dodge`	颜色减淡，通过降低对比度使下层色变亮（类似减淡工具）。适用于光晕、曝光效果。
`color-burn`	颜色加深，通过增加对比度使下层色变暗（类似加深工具）。适用于暗角、阴影强化。
`hard-light`	强光，类似`overlay`，但以上层色为基准决定混合模式。适用于模拟强光照射。
`soft-light`	柔光，类似`hard-light`，但更柔和（类似漫反射光）。适用于自然光效、柔化图像。
`difference`	差值，取两层颜色的绝对差值。适用于反色效果、艺术化处理。
`exclusion`	排除，类似`difference`，但对比度更低。适用于柔和的反色效果。
`hue`	色相，保留上层色的色相，使用下层色的饱和度和亮度。适用于统一色调。
`saturation`	饱和度，保留上层色的饱和度，使用下层色的色相和亮度。适用于调整色彩鲜艳度。
`color`	颜色，保留上层色的色相和饱和度，使用下层色的亮度。适用于黑白图像上色。
`luminosity`	亮度，保留上层色的亮度，使用下层色的色相和饱和度。适用于调整明暗不影响色彩。

浏览器支持

表中的数字指定了完全支持background-blend-mode属性的第一个浏览器版本。


Chrome	Edge	Firefox	Safari	Opera
35.0	79.0	30.0	7.1	22.0

CSS background-blend-mode 属性

定义和用法

常用的实例

1. 基本使用

2. 多背景混合

3. 与渐变结合

CSS 语法

属性值

浏览器支持

相关页面

CSS 参考手册

CSS 属性

CSS background-blend-mode 属性

定义和用法

常用的实例

1. 基本使用

2. 多背景混合

3. 与渐变结合

CSS 语法

属性值

浏览器支持

相关页面

CSS 参考手册

CSS 属性

意见反馈

反馈提交成功