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

CSS3如何实现正片叠底效果

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

  • 首先是网上搜了一下正片叠底效果的代码mix-blend-mode: multiply;,在这个弹框上确实能实现重叠,但是我的弹框被图片遮盖住了,就像这样
    CSS3如何实现投影正片叠底效果_第2张图片
  • 这可不是我想要的效果,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;
}

你可能感兴趣的:(CSS3如何实现投影正片叠底效果)