效果
混合模式mix-blend-mode
Setting how an element's content should blend with its parent background.
Overview
| Class | Declarations |
|---|---|
mix-blend-mode:normal | mix-blend-mode: normal;
|
mix-blend-mode:multiply | mix-blend-mode: multiply;
|
mix-blend-mode:screen | mix-blend-mode: screen;
|
mix-blend-mode:overlay | mix-blend-mode: overlay;
|
mix-blend-mode:darken | mix-blend-mode: darken;
|
mix-blend-mode:lighten | mix-blend-mode: lighten;
|
mix-blend-mode:color-dodge | mix-blend-mode: color-dodge;
|
mix-blend-mode:color-burn | mix-blend-mode: color-burn;
|
mix-blend-mode:hard-light | mix-blend-mode: hard-light;
|
mix-blend-mode:soft-light | mix-blend-mode: soft-light;
|
mix-blend-mode:difference | mix-blend-mode: difference;
|
mix-blend-mode:exclusion | mix-blend-mode: exclusion;
|
mix-blend-mode:hue | mix-blend-mode: hue;
|
mix-blend-mode:saturation | mix-blend-mode: saturation;
|
mix-blend-mode:color | mix-blend-mode: color;
|
mix-blend-mode:luminosity | mix-blend-mode: luminosity;
|
mix-blend-mode:<mode> | mix-blend-mode: <mode>;
|
Examples
Blend an element with its backdrop
Use mix-blend-mode:* to set how the entire element blends with content behind it.
<div class="mix-blend-mode:multiply"> ...</div>Generated CSS
@layer utilities { .mix-blend-mode\:multiply { mix-blend-mode: multiply }}Restore normal blending
Use mix-blend-mode:normal to remove a blend mode.
<div class="mix-blend-mode:normal">...</div>For blending background layers inside the same element, use background-blend-mode.
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="mix-blend-mode:normal mix-blend-mode:multiply@sm mix-blend-mode:normal@print">...</div>Blend modes can change contrast unpredictably as the backdrop changes.