更改svg / png颜色

Holly

已于 2023-04-11 11:25:26 修改

阅读量413

点赞数 2

分类专栏：小tips 文章标签： css html css3

于 2023-03-07 10:49:15 首次发布

本文链接：https://blog.csdn.net/qq_43687185/article/details/129377779

版权

7 篇文章

订阅专栏

文章探讨了如何使用CSS3的drop-shadow滤镜为SVG元素添加阴影效果，同时指出了在iOS系统中可能出现的图片加载问题。通过设置img元素的position和filter属性，可以实现SVG阴影，但需注意在某些iOS设备上可能不支持此特性，解决方案可能涉及到调整渲染方式或使用替代方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用方法：CSS3滤镜filter中的drop-shadow，通过生产一个可指定颜色的阴影放置于svg的位置，并将原始svg移出视线

<img src="img/success.svg">
img{
    position: relative;
    left: -999px;
    filter: drop-shadow(#fff 999px 0);
}

其他：

在ios系统上无法加载图片，解决方法