如何让NgbModal底部透明以显示下方内容？

要实现模态框底部渐变透明、让下方内容透过显示的效果，可以通过以下CSS修改完成：

方法一：直接给模态框内容容器设置渐变背景 #

针对NgbModal默认的.modal-content容器，直接用线性渐变替换原有背景色：

.modal-content {
  /* 从上到下，前70%保持实色，剩余30%渐变至完全透明 */
  background: linear-gradient(to bottom, #ffffff 70%, rgba(255, 255, 255, 0) 100%);
  /* 若需要去除默认圆角，可添加下面一行 */
  /* border-radius: 0; */
}

你可以调整渐变中的百分比（比如把70%改成80%）来控制透明区域的大小，也可以替换#ffffff为模态框原本的背景色。

方法二：用伪元素实现固定底部渐变（适合长内容滚动场景） #

如果模态框内容较多会滚动，希望渐变效果固定在容器底部而不随内容滚动，可以用伪元素实现：

.modal-content {
  position: relative;
  /* 先把原有背景设为透明 */
  background-color: transparent;
  /* 确保伪元素不会溢出容器 */
  overflow: hidden;
}

.modal-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 渐变方向从上到下，实色区域占比可自行调整 */
  background: linear-gradient(to bottom, #ffffff 70%, rgba(255, 255, 255, 0) 100%);
  /* 把渐变背景放在内容下方 */
  z-index: -1;
}

可选：调整背景遮罩透明度 #

如果觉得默认的模态框背景遮罩（.modal-backdrop）太暗，影响下方内容的可见度，可以降低它的透明度：

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.3);
}

内容的提问来源于stack exchange，提问作者binga58