css 给滚动容器底部设置背景虚化

CSS 可以通过一些技巧实现滚动容器底部的背景虚化效果，通常我们会结合 `position`, `height` 和 `clip-path` 或 `background-attachment` 属性来实现。这里是一个简单的例子：

/* 定义一个滚动区域 */
.scroll-container {
  position: relative; /* 给容器设定定位 */
  height: calc(100vh - 50px); /* 高度设为视口高度减去底部留白 */
  overflow-y: auto; /* 开启垂直滚动 */
}

/* 设置背景层 */
.scroll-bottom-gradient {
  position: absolute;
  bottom: 0; /* 底部对齐 */
  left: 0;
  right: 0;
  height: 50px; /* 等于留白的高度 */
  background-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.5) 90%); /* 虚化的渐变效果 */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* 使用clip-path裁剪出梯形，让背景只覆盖底部 */
  background-size: cover; /* 背景图填充整个梯形 */
  z-index: -1; /* 将背景层置于内容之下 */
}

/* 如果需要给内容添加滚动监听事件，可以这么做 */
.scroll-container:hover .scroll-bottom-gradient {
  /* 添加 hover 交互，如鼠标悬停时背景颜色加深等 */
}

在这个示例中，当用户滚动到底部时，`scroll-bottom-gradient` 角落背景会显示出来，并且随着滚动而始终保持在底部。