I'm trying to add an overlay color to an image I tried to use background with rgba color but I don't see the overlay color.

HTML code:

<img src="hero.jpg" alt="" >

CSS code:

.img-hero{
    animation-name: img-hero-animation;
    animation-duration: 900ms;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    transform: translateY(-20px);
    animation-delay: 1750ms;
    opacity: 0;
    
}

CodePudding user response：

You could use the below two ways to add an overlay on an image with CSS:

1. Use a wrapper div for the img and its :before as overlay:

body {
  margin: 0;
}
.img-container {
  position: relative;
}

.img-container img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.img-container:after {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  background-color: rgba(33, 22, 100, 0.4);
}

<div ><img src="https://images.unsplash.com/photo-1659085402847-d58e44029505?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0N3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt="" ></div>

2. Use your image as the background of a div. And use a linear-gradient that sit on the image as overlay:

body {
  margin: 0;
}
.img-container {
  height:100vh;
  background: linear-gradient( rgba(33, 22, 100, 0.4),  rgba(33, 22, 100, .7)), url("https://images.unsplash.com/photo-1659085402847-d58e44029505?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0N3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60");
  background-size: cover;
}

<div ></div>

CodePudding user response：

Add background using rgbawith transparency background: rgba(,62,84,0.82);

CodePudding user response：

Write your code like this:

 img {
      width: 100%;
      display:block;
      margin: 0;
      padding: 0;
 }

.img-hero {
      position: relative;
}

.img-hero:before {
      content:"";
      position: absolute;
      height:100%;
      width:100%;
      top:0;
      left:0;
      z-index:999;
      background: rgba(0,0,0,0.5);
}

<div >
       <img src="hero.jpg" />
</div>

I hope it helps you