Background

Background Blend

Utilities for sets the blending mode of each background layer (color or image).

Class

Usage

Set normal blending mode background image with HTML inline attribute style="..." and a CSS property background-image: url(...) to an element.

<!-- Example -->
<y class="bg-amber-600 bg-blend-normal ... bg-auto bg-center bg-no-repeat  ... h-48 w-full"
   style="background-image:url(...)"></y>

Set multiply blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-multiply ... bg-auto bg-center bg-no-repeat  ... h-48 w-full"
   style="background-image:url(...)"></y>

Set screen blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-screen ... bg-auto bg-center bg-no-repeat  ... h-48 w-full"
   style="background-image:url(...)"></y>

Set overlay blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-overlay ... bg-auto bg-center bg-no-repeat  ... h-48 w-full"
   style="background-image:url(...)"></y>

Set darken blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-darken ... bg-auto bg-center bg-no-repeat  ... h-48 w-full"
   style="background-image:url(...)"></y>

Set lighten blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-lighten ... bg-auto bg-center bg-no-repeat  ... h-48 w-full"
   style="background-image:url(...)"></y>

Set color blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-color ... bg-auto bg-center bg-no-repeat  ... h-48 w-full"
   style="background-image:url(...)"></y>

Set color-dodge blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-color-dodge ... bg-auto bg-center bg-no-repeat  ... h-48 w-full"
   style="background-image:url(...)"></y>

Set color-burn blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-color-burn ... bg-auto bg-center bg-no-repeat  ... h-48 w-full"
   style="background-image:url(...)"></y>

Set hard-light blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-hard-light ... bg-auto bg-center bg-no-repeat  ... h-48 w-full"
   style="background-image:url(...)"></y>

Set soft-light blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-soft-light ... bg-auto bg-center bg-no-repeat  ... h-48 w-full"
   style="background-image:url(...)"></y>

Set different blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-different ... bg-auto bg-center bg-no-repeat  ... h-48 w-full"
   style="background-image:url(...)"></y>

Set exclusion blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-exclusion ... bg-auto bg-center bg-no-repeat  ... h-48 w-full"
   style="background-image:url(...)"></y>

Set hue blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-hue ... bg-auto bg-center bg-no-repeat  ... h-48 w-full"
   style="background-image:url(...)"></y>

Set saturation blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-saturation ... bg-auto bg-center bg-no-repeat  ... h-48 w-full"
   style="background-image:url(...)"></y>

Set luminosity blending mode to background image.

<!-- Example -->
<y class="bg-amber-600 bg-blend-luminosity ... bg-auto bg-center bg-no-repeat  ... h-48 w-full"
   style="background-image:url(...)"></y>

Variant