Question

在用户可以提交包含图片的文字帖子并且还更改网站的各种格式方面的网站上，例如文字颜色，我想让他们提交与观众所拥有的任何文字颜色相匹配的图片。选择的。

例如，如果有人想在他们的帖子中包含复杂的数学公式，他们目前必须使用非常奇怪的表示法或提交图像。读者可能无法很好地看到此图像，或者根本无法看到这些图像。

使用我希望实施的系统，有人可以提交具有不同alpha通道的纯色图像。它将使用CSS设置为currentColor。

混合模式不起作用，因为它们还与图像背后的元素混合在一起。我不希望通过在画布上使用JavaScript绘制来使事情复杂化，因为我必须在每次用户更改其格式时将其设置为更新。我也不能只使用JavaScript来内联SVG，因为这样会使网站受到XSS攻击，并且用户可能不想去构造SVG文件的麻烦，其中每种颜色都设置为currentColor。

有办法做到这一点吗？它是什么？

Answer 1

我尝试使用kahjav的纯CSS答案，但色调旋转滤镜以晦涩的方式工作，我发现很难弄清楚我需要模拟的反转，亮度和色调旋转的组合给定的CSS颜色。所以，我想出了一个实际上使用currentColor的方法，正如我希望的那样。

我说让用户指定一个SVG文件然后用JavaScript内联它是不行的，但我可以使用带有JavaScript的内联SVG。如果我在用户的图像上放置一个反转滤镜，然后将其用作填充设置为currentColor的矩形上的蒙版，结果就是我想要的结果。我必须使用JavaScript来生成内联SVG，因为必须根据所包含图像的宽度和高度来确定多个元素的宽度和高度。但是，每次用户选择不同的主题时，我都不需要使用JavaScript来更新它。

Here's a JSFiddle to demonstrate.它生成以下形式的内联SVG：

<svg width="[width]" height="[height]" id="[id]" class="[class]" style="[style]">
  <defs>
    <filter id="invert" style="color-interpolation-filters:sRGB">
      <feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" />
    </filter>
    <mask id="img" maskUnits="userSpaceOnUse">
      <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="[image source]" width="[width]" height="[height]" filter="url(#invert)" />
    </mask>
  </defs>
  <rect mask="url(#img)" width="[width]" height="[height]" fill="currentColor" />
</svg>

Answer 2

您可以添加CSS过滤器并使用色调旋转功能：

div {
    filter: hue-rotate(/*insert deg to desired color*/);
}

Here是关于过滤器的精彩文章。您需要根据需要更改每个图像。旋转符合color wheel。

如何设置纯色图像的样式以匹配文本颜色？

2 个答案: