html - 将十六进制值转换为过滤器属性

Question

我确实在 codepen 上找到了这个, 但它使用 JS 手动计算 filter 值。我希望能够使用 SASS 来执行此操作，以便我可以以编程方式更多地构建它们。

下面是最终结果的示例，但它需要我进行硬编码。我们正在使用 gulpjs编译我们的 SASS 文件。

如果使用 SASS，我如何才能完成 codepen 所做的事情？

.icon {
  background-image: url('https://kwiksher.com/wp-content/uploads/2012/09/runningcat.png');
  display: block;
}

.icon--single {
 width: 50px;
 height: 50px;
 background-position: 25% 50%;
 filter: invert(46%) sepia(36%) saturate(6980%) hue-rotate(159deg) brightness(94%) contrast(101%);
}

<div>
  <h2>Hello there</h2>
  <span class="icon icon--single">hi</span>
</div>

Answer 1

如果您放宽原始问题要求它是纯 CSS 解决方案的要求 - 您可以直接使用 SVG 过滤器设置颜色并从 CSS 引用该过滤器。 feColorMatrix 矩阵的第五列可用于显式设置 RGB。