gradient color to <img> tag

user_12874619 0
Viewed 125

how can I add a gradient color to image tag ? this is what I have so far

<img style={{height:'100vh', width:'100%', backgroundColor:"linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%)"}} src={data.image} />

But the gradient is behind the image, what I want is the gradient be applied over the image

reactjs frontend css html
2 Answers
  1. You can simply add the img inside a div with background-image: linear-gradient, and usng z-index: -1 for the img. I have created some examples on codepen for you:

https://codepen.io/orsisi/pen/PojXWBW

 <div style="background-image: linear-gradient(to bottom, rgba(127, 255, 212, 0.52), rgba(9, 121, 10, 0.75)); width:100%; height: 600px"><img style="z-index:-1; position: relative;" src="https://i.postimg.cc/Kzc934rp/photo-1526336024174-e58f5cdd8e13.jpg"/></div>

  1. Or you can consider using a div and your image referenced with url in the same div with the background-image: linear-gradient property. https://codepen.io/orsisi/pen/JjJwEKw

Note that if you are using this style on a div, you need an rgba color with alpha 0-1 value, as that defines transparency. Otherwise the gradient will cover the image without being see-through. Bottom line: simply rgb won't work. 

<div style="background-image: linear-gradient(to bottom, rgba(127, 255, 212, 0.52), rgba(9, 121, 10, 0.75)), url(https://i.postimg.cc/Kzc934rp/photo-1526336024174-e58f5cdd8e13.jpg); width:100%; height: 600px"></div>

You can also use mix-blend-modes in CSS.

  1. This one uses multiply-blend-mode: multiply You can experiment with different blend modes, as listed here.

https://codepen.io/orsisi/pen/xxLKbeW

user_131562900

i have a way to achieve what you need, but adding some elements to the DOM.

<div style={{ height: "200px", width: "200px", position: "relative" }}>
        <div
          style={{
            position: "absolute",
            height: "100%",
            width: "100%",
            top: "0",
            left: "0",
            opacity: "0.73",
            background: "linear-gradient(to right, #16a085, #f4d03f)",
            zIndex: "2",
          }}
        />
        <img
          style={{
            position: "absolute",
            width: "100%",
            height: "100%",
            top: "0",
            left: "0",
            zIndex: "1",
          }}
          src="https://assets.diarioconcepcion.cl/2020/11/Gas-natural.jpg"
        />
      </div>

I don't know of another way to do it, although I think that with the :: after property of css it could be done better and as you requested in the same image.

user_153428210
Related