时间戳

首页 > 解决方案 > 线性渐变不完全应用于背景

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

问题描述

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

在左侧部分应用线性梯度

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

标签： htmlcssbootstrap-4

解决方案

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

推荐阅读