Question

我追求的效果非常简单。我只是试图将div的内容淡化为透明。

但是.card div的高度可变，我只希望将30px高渐变蒙版固定在div的底部。

我遇到的问题是使no-repeat区域可见，而不是被遮盖。我在网上找不到很多有关此的内容。有人可以帮忙吗？

或替代解决方案。

在此处查看代码https://jsfiddle.net/joshmoto/vdj2b1mr/

在下面的演示中，您可以滚动每一列中的内容。如果向下滚动一点，您将在底部看到30px蒙版所在的列。但是我需要在遮罩上方才能看到。我只需要底部30像素淡出为透明（包括内容）

@import "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css";
@import "https://fonts.googleapis.com/css?family=Inconsolata";

BODY {
  background: url("https://i.imgur.com/gywUcTN.png");
}

.container {
  padding: 30px;
}

.card {
  height: 100%;
  overflow-y: scroll;
  background: red;
  border-radius: 0;
  border-width: 0;
  
  /* mask css */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 100%;
  -webkit-mask-size: 100% 30px;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(rgba(0, 0, 0, 0)));
  -webkit-mask-composite: initial;
  
}

.card-body {
  padding: 30px;
}

#example-1 {
  height: 200px;
}

#example-2 {
  height: 400px;
}

#example-3 {
  height: 300px;
}

<div class="container">

  <div class="row">
    <div class="col-4" id="example-1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
      </div>
    </div>
    <div class="col-4" id="example-2">
      <div class="card card-body">
        Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
    <div class="col-4" id="example-3">
      <div class="card card-body">
        Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>

</div>

div底部的-webkit-mask渐变

0 个答案: