色彩與背景
背景混合模式background-blend-mode
Setting how an element's background images should blend with the background color.
Overview
| Class | Declarations |
|---|---|
background-blend-mode:normal | background-blend-mode: normal;
|
background-blend-mode:multiply | background-blend-mode: multiply;
|
background-blend-mode:screen | background-blend-mode: screen;
|
background-blend-mode:overlay | background-blend-mode: overlay;
|
background-blend-mode:darken | background-blend-mode: darken;
|
background-blend-mode:lighten | background-blend-mode: lighten;
|
background-blend-mode:color-dodge | background-blend-mode: color-dodge;
|
background-blend-mode:color-burn | background-blend-mode: color-burn;
|
background-blend-mode:hard-light | background-blend-mode: hard-light;
|
background-blend-mode:soft-light | background-blend-mode: soft-light;
|
background-blend-mode:difference | background-blend-mode: difference;
|
background-blend-mode:exclusion | background-blend-mode: exclusion;
|
background-blend-mode:hue | background-blend-mode: hue;
|
background-blend-mode:saturation | background-blend-mode: saturation;
|
background-blend-mode:color | background-blend-mode: color;
|
background-blend-mode:luminosity | background-blend-mode: luminosity;
|
background-blend-mode:<mode> | background-blend-mode: <mode>;
|
Examples
Blend background layers
Use background-blend-mode:* when multiple background layers or a background image and color should blend together.
<section class="bg:url(/hero.jpg) bg:blue-60/.4 background-blend-mode:multiply"> ...</section>Generated CSS
@layer theme { :root { --color-blue-60: oklch(51.83% .2687 266.1) }}@layer utilities { .background-blend-mode\:multiply { background-blend-mode: multiply } .bg\:blue-60\/\.4 { background-color: color-mix(in oklab, var(--color-blue-60) 40%, transparent) } .bg\:url\(\/hero\.jpg\) { background-image: url(/hero.jpg) }}Restore normal blending
Use background-blend-mode:normal to remove a blend mode at a breakpoint or state.
<section class="background-blend-mode:normal">...</section>For blending the whole element with content behind it, use mix-blend-mode.
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="background-blend-mode:normal background-blend-mode:multiply@sm background-blend-mode:normal@print">...</div>Check contrast after blending, especially when text sits on top of the background.