Text opacity with black background
<p>I'm trying to create a page where I have a background image with text on top of it (see attached picture)</p>

<p><a href="https://i.stack.imgur.com/vsR9w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vsR9w.png" alt="enter image description here"></a> </p>

<p>I want to achieve something where the background is more dark (just the part of the background picture where text is written), so that the text is more visible.</p>

<p>I tried doing something like this:</p>

<p><a href="https://i.stack.imgur.com/Utyxm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Utyxm.png" alt="enter image description here"></a></p>

<p>by setting the background-color: black and opacity: 0.5;
but I don't want a black 'box' or sharp edged block. What I want is kind of a black shadow in the background so that it looks more soothing to the viewer. Does anybody has any suggestions for this? </p>