在 HTML 中如何修改 标签图像颜色，无需 CSS

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《在 HTML 中如何修改 标签图像颜色，无需 CSS》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

修改 标签颜色

如何在不使用 css 的情况下，只用 html 代码修改 标签上的图像颜色？

解答

使用 svg 格式

可以通过 标签改变颜色的图片格式有 svg。主要通过阴影和 position:relative，改变 标签引入的 svg 的颜色。

示例代码：

<div class="icon">
  <img src="https://segmentfault.com/img/icon/go.svg" />
</div>

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

原理

使用 overflow: hidden 将原图溢出容器并隐藏。同时设置 position: relative，使图像相对定位。

然后通过 filter: drop-shadow(#333333 20px 0) 设置阴影颜色，其中 #333333 为阴影颜色，20px 为阴影偏移值。通过设置负的 left 值将图像溢出隐藏区域，只显示阴影变色的部分。

注意：此方法仅适用于 svg 格式的图像。

终于介绍完啦！小伙伴们，这篇关于《在 HTML 中如何修改 标签图像颜色，无需 CSS》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！