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

最新推荐文章于 2024-09-24 11:22:03 发布

supperNine

最新推荐文章于 2024-09-24 11:22:03 发布

阅读量44

点赞数

文章标签： html css 前端 css3 javascript

本文链接：https://blog.csdn.net/weixin_42516428/article/details/128653430

版权

效果图

样式

<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;
  }
 }