⚡ Quick Fix (TL;DR)

The Culprit: Setting opacity directly on a section fades everything inside it, including the text and content, not just the background.

The Fix: Create a separate image layer using a pseudo-element, so its opacity can be controlled independently of the real content.

.example {
  position: relative;
  isolation: isolate;
}
.example::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("IMAGE-URL-HERE");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.25;
  z-index: -1;
}