CSS中使用SVG图标作为背景图如何继承对应元素的文字颜色？

推荐方案：使用CSS mask属性实现 #

该方案兼容性覆盖所有现代浏览器，无需编写多套颜色适配规则，代码改动最小：

a[target="_blank"]:not(.no-ext-icon) {
  /* 兼容webkit内核浏览器前缀 */
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/><path fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/></svg>") center right no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/><path fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/></svg>") center right no-repeat;
  /* 设置遮罩尺寸和原图标一致 */
  -webkit-mask-size: 16px;
  mask-size: 16px;
  /* 背景色使用currentColor自动继承文字颜色 */
  background-color: currentColor;
  padding-right: 1.375rem;
}

实现逻辑 #

原来的方案中，作为background-image引入的SVG是独立资源，内部的currentColor只会读取SVG自身上下文的颜色值，无法继承父元素<a>的文字颜色。
改用mask属性后，SVG会作为遮罩层裁剪元素的背景显示区域，只有SVG图形对应的位置会显示元素的背景色。将背景色设置为currentColor，就可以自动继承<a>标签的文字颜色，不管链接文字是什么颜色，图标都会自动同步变色。

内容的提问来源于stack exchange，提问作者af86