html - 线性渐变未完全应用于背景

我有一个问题，我的线性渐变没有一直应用到底部。我尝试从ID为style="background-image: url('img/bg-showcase-2.jpg');"的div中删除design-me。在css文件中，我改用background-image: url("img/bg-showcase-2.jpg"), linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 100%);。我也尝试过其他方法，但是在这里描述太久了。我该如何解决这个问题？

Partially applied linear-gradient on the left side

的HTML

<div class="col-lg-8">
  <div class="row no-gutters">
    <div id="design-me" class="col-lg-6 text-white showcase-img" style="background-image: url('img/bg-showcase-2.jpg');"></div>
    <div class="col-lg-6 my-auto showcase-text">
       //.....
    </div>
  </div>
</div>

的CSS

.showcase .showcase-img {
 background-size: cover;
 animation: fadeIn 1.5s;
}

.showcase-img::before {
 display: block;
 position: relative;
 /* margin-bottom: -300px; */
 height: 400px;
 width: 100%;
 content: '';
}

@media (min-width: 992px) {
 .showcase-img::before{
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 100%);
 }
 @keyframes fadeIn {
     from {
       transform: translateX(100px);
       opacity: 0;
     }
     to {
       transform: translateX(0px);
       opacity: 1;
     }
 }
}

最佳答案

我在媒体查询中使用了.showcase-img::before{，而不是使用.showcase-img{。我删除了height: 400px;。我已经在媒体查询中放置了max-height: 100%;。因此，现在图像和linear-gradient效果将根据右侧列表的长度调整大小。

的CSS

@media (min-width: 992px) {
 .showcase-img{
  background-image:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0,
      #fff 100%
    ),url('../img/bg-showcase-2.jpg');
    max-height: 100%;
 }
 @keyframes fadeIn {
     from {
       transform: translateX(100px);
       opacity: 0;
     }
     to {
       transform: translateX(0px);
       opacity: 1;
     }
 }
}

关于html - 线性渐变未完全应用于背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51120942/