背景阴影定位父级中心点并放大

效果图

样式

<div class="img gutter-mb-10">
  <img :src="src">
</div>
.img{
 position: relative;
  img {
    width: 90px;
    height: 100px;
    position: relative;
    z-index: 10;
  }
  &::after {
    content: "";
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    background: url(~@/assets/login/shdow_blue.png) no-repeat;
    // background: url(~@/assets/redFox.jpg) no-repeat;
    background-size: 100% 100%;
    transform: translate(-50%, 0) scale(2, 2);
    transform-origin: center center;
  }
 }
posted @ 2022-08-10 09:26  qoon  阅读(19)  评论(0)    收藏  举报