Question

线性渐变未显示。

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

该图像上需要线性渐变。

Answer 1

删除img标签。

<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

您可以使用: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>

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

2 个答案: