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

修改 标签颜色

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

解答

使用 svg 格式

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

示例代码：

<div class="icon">
  @@##@@
</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的详细内容，更多请关注其它相关文章！