如何用CSS改变IMG标签中图片的颜色？

巧妙运用CSS修改图片颜色：并非易事，但并非不可能，许多开发者都曾尝试直接修改。

.icon {
  overflow: hidden; /* 隐藏溢出的内容 */
  display: inline-block;
  line-height: 12px; /* 覆盖默认行高 */
  img {
    width: 6px;
    height: 12px;
    position: relative;
    left: -20px; /* 将图片向左移动，超出容器 */
    filter: drop-shadow(#333333 20px 0); /* 应用阴影效果，模拟颜色变化 */
    -webkit-filter: drop-shadow(#333333 20px 0); /* WebKit浏览器兼容性 */
  }
}

这段代码通过drop-shadow滤镜创建阴影，并通过调整偏移量(20px 0)将阴影显示在图片之外的区域。overflow: hidden隐藏了溢出的部分，只显示阴影区域，从而达到改变颜色外观的目的。 为了兼容不同的浏览器，我们还使用了-webkit-filter。 通过修改drop-shadow的参数，可以轻松调整颜色和效果。 记住，这种方法的核心在于SVG图片的可编辑性和CSS的灵活运用。

标签： css

赏

选择打赏方式

微信 支付宝 QQ钱包

打赏

打赏

打赏