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

效果图

样式

<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 @   qoon  阅读(14)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示