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 January 2020.

* 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;

.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;

值

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

形式定义

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

形式语法

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

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

示例

不同 mix-blend-mode 值的效果


  
    
      Blending in isolation (no blending with the background)
    
    
      
        normal
        
          
            
            
          
        
      
      
        multiply
        
          
            
            
          
        
      
      
        darken
        
          
            
            
          
        
      
      
        screen
        
          
            
            
          
        
      
      
        lighten
        
          
            
            
          
        
      
      
        overlay
        
          
            
            
          
        
      
      
        color-dodge
        
          
            
            
          
        
      
      
        color-burn
        
          
            
            
          
        
      
      
        hard-light
        
          
            
            
          
        
      
      
        soft-light
        
          
            
            
          
        
      
      
        difference
        
          
            
            
          
        
      
      
        exclusion
        
          
            
            
          
        
      
      
        hue
        
          
            
            
          
        
      
      
        saturation
        
          
            
            
          
        
      
      
        color
        
          
            
            
          
        
      
      
        luminosity
        
          
            
            
          
        
      
    

    Blending globally (blend with the background)
    
      
        normal
        
          
            
            
          
        
      
      
        multiply
        
          
            
            
          
        
      
      
        darken
        
          
            
            
          
        
      
      
        screen
        
          
            
            
          
        
      
      
        lighten
        
          
            
            
          
        
      
      
        overlay
        
          
            
            
          
        
      
      
        color-dodge
        
          
            
            
          
        
      
      
        color-burn
        
          
            
            
          
        
      
      
        hard-light
        
          
            
            
          
        
      
      
        soft-light
        
          
            
            
          
        
      
      
        difference
        
          
            
            
          
        
      
      
        exclusion
        
          
            
            
          
        
      
      
        hue
        
          
            
            
          
        
      
      
        saturation
        
          
            
            
          
        
      
      
        color
        
          
            
            
          
        
      
      
        luminosity

html,
body {
  height: 100%;
  box-sizing: border-box;
  background: #eee;
}

.grid {
  width: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;
}

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
  height: auto;
}

.cell {
  margin: 0.5em;
  padding: 0.5em;
  background-color: #fff;
  overflow: hidden;
  text-align: center;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: 0.5em 0.5em 0;
  font: 0.8em sans-serif;
  text-align: left;
  white-space: nowrap;
}

.note + .row .cell {
  margin-top: 0;
}

.container {
  position: relative;
  background:
    linear-gradient(to right, #000 0%, transparent 50%, #fff 100%),
    linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%);
  width: 150px;
  height: 150px;
  margin: 0 auto;
}

.R {
  transform-origin: center;
  transform: rotate(-30deg);
  fill: url(#red);
}

.G {
  transform-origin: center;
  transform: rotate(90deg);
  fill: url(#green);
}

.B {
  transform-origin: center;
  transform: rotate(210deg);
  fill: url(#blue);
}

.isolate .group {
  isolation: isolate;
}

.normal .item {
  mix-blend-mode: normal;
}
.multiply .item {
  mix-blend-mode: multiply;
}
.screen .item {
  mix-blend-mode: screen;
}
.overlay .item {
  mix-blend-mode: overlay;
}
.darken .item {
  mix-blend-mode: darken;
}
.lighten .item {
  mix-blend-mode: lighten;
}
.color-dodge .item {
  mix-blend-mode: color-dodge;
}
.color-burn .item {
  mix-blend-mode: color-burn;
}
.hard-light .item {
  mix-blend-mode: hard-light;
}
.soft-light .item {
  mix-blend-mode: soft-light;
}
.difference .item {
  mix-blend-mode: difference;
}
.exclusion .item {
  mix-blend-mode: exclusion;
}
.hue .item {
  mix-blend-mode: hue;
}
.saturation .item {
  mix-blend-mode: saturation;
}
.color .item {
  mix-blend-mode: color;
}
.luminosity .item {
  mix-blend-mode: luminosity;
}

HTML 中使用 mix-blend-mode

HTML

html

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

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

浏览器兼容性

参见

background-blend-mode