相关疑难解决方法(0)

如何仅使用CSS过滤器将黑色转换为任何给定的颜色

我的问题是:给定目标RGB颜色,#000使用CSS滤镜将黑色()重新着色为该颜色的公式是什么?

为了接受答案,它需要提供一个函数(以任何语言)接受目标颜色作为参数并返回相应的CSS filter字符串.

对此的上下文是需要在a内重新着色SVG background-image.在这种情况下,它是支持KaTeX中的某些TeX数学特性:https: //github.com/Khan/KaTeX/issues/587.

如果目标颜色为#ffff00(黄色),则一个正确的解决方案是:

filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg)
Run Code Online (Sandbox Code Playgroud)

(演示)

非目标

  • 动画.
  • 非CSS过滤器解决方案.
  • 从黑色以外的颜色开始.
  • 关心黑色以外的颜色会发生什么.

结果到目前为止

  • 强力搜索固定过滤器列表的参数:https
    ://stackoverflow.com/a/43959856/181228缺点:效率低下,只生成一些16,777,216种可能的颜色(676,248 hueRotateStep=1).

  • 使用SPSA的更快的搜索解决方案:https : //stackoverflow.com/a/43960991/181228 Bounty奖励

  • 一个drop-shadow解决方案: /sf/answers/3077189741/
    缺点:不上边缘运行.需要非filterCSS更改和次要HTML更改.

您仍然可以通过提交非暴力解决方案获得接受的答案!

资源

javascript css math algebra css-filters

91
推荐指数
6
解决办法
1万
查看次数

标签 统计

algebra ×1

css ×1

css-filters ×1

javascript ×1

math ×1