I'm currently facing a challenge where I need to darken the background of an image without affecting its contents, much like the example below. The image is generated programmatically, so I can't directly link to it in the CSS.
This is how the desired outcome should look:
https://i.sstatic.net/Xr1HE.png
However, this is how it actually appears for me, and I need the characters to appear much brighter:
https://i.sstatic.net/3wzks.png
I've explored various solutions involving ::before or ::after pseudo-elements, but due to the inline rendering of my image, those methods won't work. Below is my code snippet:
REACT.TSX
{apartments.map(({ name, images, taskStatus }: any, index: number) => (
<Link key={index} to={`/apartments/${index}`}>
<div
className="apartmentImage"
style={{
backgroundImage: `url(${API_IMAGE}${images[0]})`,
}}
>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h5 className="apartmentText">{name}</h5>
</div>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h6 className="subApartmentText">MALAGA</h6>
</div>
</div>
</Link>
))}
CSS:
.apartmentImage {
width: 98%;
margin-left: 1%;
height: 24.7vh;
border-radius: 10px;
margin-top: 3%;
margin-bottom: -1%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.8);
}
.apartmentText {
color: white;
font-weight: bold;
}
If you have any suggestions on how to tackle this issue, I would greatly appreciate it!
Thank you for your assistance!