css mix-blend,CSS mix-blend-mode 属性

更多实例

实例

演示所有值：

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

实例

使用 mix-blend-mode 来创建响应式 cutout/knockout 文本(抠图文本)：

.image-container {

background-image: url("paris.jpg");

background-size: cover;

position: relative;

height: 300px;

}

.text {

background-color: white;

color: black;

font-size: 10vw;

font-weight: bold;

margin: 0 auto;

padding: 10px;

width: 50%;

text-align: center;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

mix-blend-mode: screen;

}