BG Overlay Class

This class adds a background color to your element. The background is added on the ::after pseudo-element. This allows us to change the opacity of the background without affecting the actual content of your element.

HINT
The image layout is a layout with this .bg-overlay and the .bg-image applied to it.
Similarly, the block component is a component with both classes applied.

Both are probably easier to use than to provide a custom element with CSS variables.

Variables

Name	Description	Default
--overlay-color	Background color
--overlay-opacity	Opacity of the background color

CSS

/* Base Styling */
.bg-overlay {
    position: relative;

    &::after {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;

        background: var(--overlay-color);
        opacity: var(--overlay-opacity);
    }
}

/* Overridable Styling */
:where(.bg-overlay) {
    overflow: hidden;
    isolation: isolate;

    &::after {
        inset: 0;
    }
}