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

Question

我有一个问题，我的线性渐变没有一直应用到底部。我尝试从 ID 为 design-me 的 div 中删除 style="background-image: url('img/bg-showcase-2.jpg');"。在 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;
     }
 }
}