1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. mix-blend-mode

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

mix-blend-mode

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年1月⁩.

* Some parts of this feature may have varying levels of support.

mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

尝试一下

mix-blend-mode: normal; 
mix-blend-mode: multiply; 
mix-blend-mode: hard-light; 
mix-blend-mode: difference; 
<section class="default-example" id="default-example"> <div class="example-container"> <img id="example-element" src="/shared-assets/images/examples/firefox-logo.svg" width="200" /> </div> </section> 
.example-container { background-color: sandybrown; }

语法

css
/* 关键字值 */ 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: plus-darker; mix-blend-mode: plus-lighter; /* 全局值 */ mix-blend-mode: inherit; mix-blend-mode: initial; mix-blend-mode: revert; mix-blend-mode: revert-layer; mix-blend-mode: unset;

值

<blend-mode>

表示应该应用的混合模式。

形式定义

初始值normal
适用元素所有元素
是否是继承属性否
计算值as specified
动画类型Not animatable
Creates stacking context是

形式语法

mix-blend-mode = 
 <blend-mode> |
 plus-darker |
 plus-lighter 

<blend-mode> = 
 normal |
 multiply |
 screen |
 overlay |
 darken |
 lighten |
 color-dodge |
 color-burn |
 hard-light |
 soft-light |
 difference |
 exclusion |
 hue |
 saturation |
 color |
 luminosity

示例

不同 mix-blend-mode 值的效果

HTML 中使用 mix-blend-mode

HTML

html
<div class="isolate"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> <div class="circle circle-3"></div> </div>

CSS

css
.circle { width: 80px; height: 80px; border-radius: 50%; mix-blend-mode: screen; position: absolute; } .circle-1 { background: red; } .circle-2 { background: lightgreen; left: 40px; } .circle-3 { background: blue; left: 20px; top: 40px; } .isolate { isolation: isolate; /* Without isolation, the background color will be taken into account */ position: relative; }

结果

SVG 中使用 mix-blend-mode

SVG

html
<svg> <g class="isolate"> <circle cx="40" cy="40" r="40" fill="red" /> <circle cx="80" cy="40" r="40" fill="lightgreen" /> <circle cx="60" cy="80" r="40" fill="blue" /> </g> </svg>

CSS

css
circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */

结果

规范

Specification
Compositing and Blending Level 2
# mix-blend-mode

浏览器兼容性

参见

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content