如何使 NgbModal 的底部透明，以便通过它可以看到下面的内容

Question

我有一个使用 NgbModal 的非常基本的模态https://stackblitz.com/edit/angular-ngbmodal-be7ia5uq?file=app%2Fmodal-component.ts

打开是这样的

但我想要的是使底部逐渐褪色/透明，以便通过透明部分可以看到模态下方的内容。这可以通过一些CSS实现吗？
抱歉，我无法找出生成输出图像的方法，但我希望我的问题足够清楚

Answer 1

您可以使用

keyframes

创建

fadeout

动画。

    ::ng-deep ngb-modal-backdrop {
      -webkit-animation: fadeOut 3s;
      animation: fadeOut 3s;
      animation-fill-mode: forwards;
    }
    @keyframes fadeOut {
        0% { opacity: .5;}
        100% { opacity: 0;}
    }

Stackblitz 演示