img使用svg修改颜色

最新推荐文章于 2024-06-13 15:55:04 发布

一个热爱前端的小胖子

最新推荐文章于 2024-06-13 15:55:04 发布

阅读量1.2k

点赞数

分类专栏： css 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_70243424/article/details/131865988

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该文章介绍了如何使用SVG图像结合CSS来创建定位阴影效果。通过设置`transform:translateX(-80px);`和`filter:drop-shadow(#00be6580px0)`，并利用透明边框解决阴影超出容器隐藏的问题。

摘要由CSDN通过智能技术生成

<div class="svg">
      <img w60 h60  :src="xxx.svg" alt=""class="svg-color" />
</div>

.svg {
  width: 60px;
  height: 60px;
  overflow: hidden;

  .svg-color {
    position: relative;
    transform: translateX(-80px);
    filter: drop-shadow(#00be65 80px 0);
    border-left: 4px solid transparent; //防止drop-shadow主体超出视线隐藏后阴影消失
    border-right: 4px solid transparent;
  }
}