background-blend-mode

概述

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
是否适用于 CSS 动画
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

Formal syntax:  <blend-mode>#
/* 单值 */
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 首次定义

浏览器兼容性

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,