HTML CSS Flexbox

Community feedback

• 

  Jeuri Morel•1,405

  @JeuriMorelPosted about 3 years ago

  One thing you can try is by using a pseudo-element. Add position: relative; to the div that contains the image, then add this CSS:

  .image::before {
      content: '';
      inset: 0;
      position: absolute;
      background-color: purple;
      opacity: 0.5;
  }
  

  Change the background color to the color you wish to use and play around with the opacity. Don't know if this is the best solution, but it's the first thing I would try. Hope this helps.

  Marked as helpful

  2

  ---

  

  Gavin Loo•100

  @rawsashimi1604Posted about 3 years ago

  @JeuriMorel Hey Jeuri, your solution helped! Thank you

  0
• 

  Adithya shetty•80

  @ADITHYAADHI06Posted about 3 years ago

  use div , b-image and b-color and then use background-blend-mode as soft-light.... in this one of way to do that

  Marked as helpful

  2

  ---

  

  Gavin Loo•100

  @rawsashimi1604Posted about 3 years ago

  @ADITHYAADHI06 Hey Adithya, I used opacity: 50%; to solve the issue. Will take a look at your solution when I have the time to do so!

  0
• 

  Kelvin Lee•70

  @kelvin-lee098Posted about 3 years ago

  Hey Gavin, Let's try set your image in backgroud-image. Then, you should add a div inside, and css for that div maybe is: { height: 100%; background-color: rgb(98 9 154); opacity: 0.5; }

  Marked as helpful

  1

  ---

  

  Gavin Loo•100

  @rawsashimi1604Posted about 3 years ago

  @kelvin-lee098 Thank you Kelvin, that helped me solve the issue!

  1