如何用css实现当元素内容超过一定高度底部添加渐变背景？

nbstudy 发表于 2024-06-25 15:35:53

要在元素内容超过一定高度时底部添加蒙版，可以使用CSS的线性渐变作为背景图片。

html代码

html 复制代码

<div class="note-article-list-item">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

css代码

css 复制代码

.note-article-list-item {
  height: 380px;
  overflow:hidden;
  margin-bottom: 20px;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px; /* 蒙版的高度 */
    background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
    pointer-events: none; /* 使蒙版不接收鼠标事件 */
  }
}

关键点：元素添加 height,overflow,position等css属性，伪类元素绝对定位，并添加background渐变