CSS3如何实现投影正片叠底效果

CSS3如何实现正片叠底效果

在写弹框时被UI科普了一波正片叠底，于是网上搜了一下css3如何实现正片叠底效果，但都是叠图时使用，不是我想要的效果，最终转换了一下思路，实现了如下图的效果，在与图片重合处没有投影，在白色区域有投影

• 首先是网上搜了一下正片叠底效果的代码mix-blend-mode: multiply;，在这个弹框上确实能实现重叠，但是我的弹框被图片遮盖住了，就像这样
  
• 这可不是我想要的效果，UI跟我说可以只对投影进行叠底，但是css代码是直接对弹框设置投影的，这可没法设置，于是尝试再写一下div与弹框叠加，将投影放在div上
• 尝试了多种方式，先是添加了伪元素::after，但是叠底效果不起作用，于是又在弹框内部添加div，但是叠底像是失效了一样，丝毫不起作用
• 最终我将div与弹框放置于平行位置，设置相同的位置，果然效果达到了

>ul{
        position: absolute;
        right: .15rem;
        top: 85%;
        z-index: 3;
        background: #fff;
        color