Background

Background Blend Mode

Style syntax for setting how an element's background images should blend with the background color.

🚧This page is still under construction and some content may not be complete.

Overview [sr-only]

ClassDeclarations
background-blend-mode:modebackground-blend-mode: mode
background-blend-mode:normalbackground-blend-mode: normal
background-blend-mode:multiplybackground-blend-mode: multiply
background-blend-mode:screenbackground-blend-mode: screen
background-blend-mode:overlaybackground-blend-mode: overlay
background-blend-mode:darkenbackground-blend-mode: darken
background-blend-mode:lightenbackground-blend-mode: lighten
background-blend-mode:color-dodgebackground-blend-mode: color-dodge
background-blend-mode:color-burnbackground-blend-mode: color-burn
background-blend-mode:hard-lightbackground-blend-mode: hard-light
background-blend-mode:soft-lightbackground-blend-mode: soft-light
background-blend-mode:differencebackground-blend-mode: difference
background-blend-mode:exclusionbackground-blend-mode: exclusion
background-blend-mode:huebackground-blend-mode: hue
background-blend-mode:saturationbackground-blend-mode: saturation
background-blend-mode:colorbackground-blend-mode: color
background-blend-mode:luminositybackground-blend-mode: luminosity

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="background-blend-mode:normal:hover background-blend-mode:normal@sm background-blend-mode:normal@dark background-blend-mode:normal@print"></div>
PREVIOUS
Background Attachment

Style syntax for setting whether position of background image is fixed when scrolling.

NEXT
Background Clip

Style syntax for controlling how clip the background.

MIT License © Aoyue Design LLC.