We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概述

background-blend-mode CSS属性定义该元素的背景图片,以及背景色如何混合。

混合模式应该按background-image CSS属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等,它会被截取至相等的数量。

初始值normal
适用元素All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter and ::first-line.
是否是继承属性
适用媒体none
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

Formal syntax:  <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

/* 单值 */
background-blend-mode: normal;

/* 双值,每个背景一个值 */
background-blend-mode: darken, luminosity;

background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;

<blend-mode>

一个<blend-mode>定义混合的模式,可以有多个值,用逗号间隔。

示例

规范

规范 状态 备注
Compositing and Blending Level 1
background-blend-mode
Candidate Recommendation 首次定义

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 35 30.0 (30.0) 未实现 22 7.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 未实现 30.0 (30.0) 未实现 22 iOS 8

参见

文档标签和贡献者

此页面的贡献者: mrstork, Sebastianz, ziyunfei, fskuok
最后编辑者: mrstork,