为什么线性渐变不适用于图像？

Question

linear-gradient is not showing up.

<div class="bg-img img-flud">
    <img style="background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) url(&qout;../Movie_site/assets/img/captain-marvel-2019-10k-ym-1920x1080.jpg&qout;);  height: auto; max-width: 100%;" 
    class="img" 
    src="../Movie_site/assets/img/captain-marvel-2019-10k-ym-1920x1080.jpg" alt="">

need linear-gradient on that image.

Answer 1

Remove img tag.

<div id='image-back'></div>

#image-back {

background-image:
linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
url('images/background.jpg');

width: 100vw;
height: auto;
background-size: cover;
}

Answer 2

You can do this using :after

 .img-gradient { position: relative; display: inline-block; } .img-gradient:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: inline-block; background: -webkit-linear-gradient(top, rgba(23,34,40,0.5) 0%, rgba(220, 66, 37, 0.5) 100%); } .img-gradient img { display: block; }

 <div class="img-gradient"> <img src="https://www.w3schools.com/bootstrap/la.jpg" width="400" /> </div>