Darken background image with Tailwind

Recently I received a Figma design to implement, and the JPG file I received to use as a background image looks a lot brighter than the image used in Figma project.

I first saw this when I looked into the styling section of the box and my eyes bled a bit.

background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%), url(<path-to-image>), lightgray 50% / cover no-repeat;

After recovering from the initial shock, I stumbled upon with the idea to use brightness feature like this;

<div class="bg-scroll bg-center bg-no-repeat brightness-50 flex flex-col h-screen justify-center items-center text-white">
...
</div>

But the problem with this approach is it also kills the brightness of every other element in it.

The better solution is that to use bg-blend-darken utility class;

<div class="bg-scroll bg-center bg-no-repeat bg-cover bg-blend-darken bg-black bg-opacity-60 flex flex-col h-screen justify-center items-center">
...
</div>

The three extra class bg-blend-darken bg-black bg-opacity-50 is enough to darken the background image without compromising brightness of the children elements!