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: #303030;
        font-weight: normal;
        height: .86rem;
        width: 1.08rem;
        padding: .04rem .14rem .04rem .1rem;
        box-sizing: border-box;
        border-radius: .06rem;
        font-size: .15rem;
        line-height: 1;
        li{
          height: 50%;
          display: flex;
          align-items: center;
        }
        >li:nth-of-type(1)>img{
          height: .16rem;
          width: .16rem;
        }
        >li:nth-of-type(2)>img{
          height: .193rem;
          width: .16rem;
        }
        img{
          margin-right: .08rem;
        }
      }
      >div{
        position: absolute;
        right: .15rem;
        top: 85%;
        background: #fff;
        height: .86rem;
        width: 1.08rem;
        z-index: -1;
        border-radius: .06rem;
        box-shadow: 0 0 .08rem .01rem rgba(227, 227, 227, 0.6);
        mix-blend-mode: multiply;
}