CSS 参考手册教程
CSS mix-blend-mode 属性
CSS mix-blend-mode 属性
CSS mix-blend-mode 属性
实例
设置图片元素与父容器背景（黄色）进行混合，图片会变暗：
.container {
background-color: yellow;
padding: 15px;
}
.container img {
mix-blend-mode: darken;
}
尝试一下 »
标签定义及使用说明
mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
| 默认值: | normal |
|---|---|
| 继承: | 无。 |
| 动画: | 无。 关于 CSS 动画 |
| JavaScript 语法: | object.style.mixBlendMode = "darken" 尝试一下 » |
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| mix-blend-mode | 41.0 | 不支持 | 32.0 | 8.0 | 35.0 |
语法
mix-blend-mod: <blend-mode><blend-mode> 的值可以是以下几个：
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;
多个值可以使用逗号隔开。
实例
各种混合模式实例：
.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}
尝试一下 »
| CSS mix-blend-mode 属性 |
|---|
CSS 参考手册
CSS 参考手册提供了完整的 CSS 属性列表，每个属性都配有语法说明及实例演示，另外还讲解了 CSS 选择器、颜色值及浏览器支持等相关内容。
加载中,请稍侯......