gradient color to <img> tag-CodePudding

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

CodePudding user response：

Would you consider adding it to a div instead?

<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>

Or you can add the img inside a div, adding z-index: -1 to the img and position: relative :

 <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>

CodePudding user response：

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.