mix-blend-mode

翻译不完整。 请帮助我们翻译这篇文章！

mix-blend-mode 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: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

值

<blend-mode>
表示应该应用的混合模式。

形式定义

初始值normal
适用元素all elements
是否是继承属性否
计算值as specified
Animation typediscrete
Creates stacking contextyes

形式语法

<blend-mode>
where 
<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

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

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

Result

SVG中使用 mix-blend-mode

SVG

<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

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

Result

规范

规范 状态 注释
Compositing and Blending Level 1
mix-blend-mode		 Candidate Recommendation Initial specification.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
mix-blend-modeChrome Full support 41Edge Full support 79Firefox Full support 32IE No support NoOpera Full support 28Safari Full support 8WebView Android Full support 41Chrome Android Full support 41Firefox Android Full support 32Opera Android Full support 28Safari iOS Full support 8Samsung Internet Android Full support 4.0
On SVG elementsChrome Full support 41Edge Full support 79Firefox Full support 32IE No support NoOpera Full support 28Safari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 32Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support

另见