Search code examples
cssbackground-imageopacity

Darken css image background

The background behind the image without darkening the image. Currently I have an html element like this

<div className='new-offers-item-favourite' />

The element has a linear-gradient and an image set to it:

background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url('http://res.cloudinary.com/wisdomabioye/image/upload/v1462961781/about_vbxvdi.jpg') no-repeat center center;

which affects the actual image too making it 0.3 opaque when I need it solid white.

Is there a way to do so w/o wrapping the image to a <div>? Maybe an :after pseudo element. Wish there was a css way.

Update 1. Tried this too. Same effect.

background-image: url('/assets/images/new-offers-tem-favourite.3c611ec2.svg');
background-color: #000;
opacity: 0.5;
Solution

  • The solution.

    background-image: url('/assets/images/new-offers-item-favourite.3c611ec2.svg');
background-color: rgba(0, 0, 0, 0.5);

    The credit goes to @misorude.