Overlay

Background overlays for text contrast on images.

.bg-overlay --overlay-color

Texte lisible sur image

<div class="bg-overlay" style="--overlay-color: rgba(0,0,0,0.5); background-image: url(...)">
  <span>Content above overlay</span>
</div>

.bg-overlay --overlay-color: linear-gradient(...)

Gradient overlay

<div class="bg-overlay" style="--overlay-color: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8))">
  ...
</div>