Using Vanila HTML and CSS | Stats Preview Card component

Community feedback

• 

  Esteban Casas Garzón•75

  @estebancasas9817Posted over 3 years ago

  To change de color of an image you can use linear-gradient. Use a div with the class of img

  CSS

  .img { background-image: linear-gradient( to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8) ), url(./design/desktop-design-theme-1.jpg); // THE URL OF THE IMAGE

  height: 100vh;
  

  }

  That's all.

  Marked as helpful

  0
• 

  Geoff Walker•165

  @Geoff-WalkerPosted over 3 years ago

  Hi try setting the background color of the image div to the purple color and then use the following settings on the actual image:

  1. opacity: lower than one so you can see the background

  2. mix-blend-mode: multiply;

  1

  ---

  

  Shahin NJ•1,190

  @SJ-NosratPosted over 3 years ago

  @Geoff-Walker

  Yes, great suggestion!

  However, an <img src="your relative path here"> should be the child of the .img class as mix-blend-mode interacts in the following way: The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

  As mentioned in the MDN article here.

   .img {
     background-color: var(--Soft-violet);
  }
  
  img {
   mix-blend-mode: multiply;
  }
  

  Notice in the above code, that .img is the class (as used by the OP) and img is the element added as a child to the .img class, respectively.

  0