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

Question

我有一个问题，我的线性渐变没有一直应用到底部。我尝试从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;
     }
 }
}

Answer 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;
     }
 }
}

Answer 2

可能发生的另一个问题是背景没有显示在最后一个像素上，并在2个块之间创建了间隙。在此屏幕截图中，您可以看到经过长时间的测试，我如何使用：

我的padding-box变量上的
• background-origin值。
• 请确保使用 0％设置的颜色 100％。