相关疑难解决方法(0)

我的问题是:给定目标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)

(演示)

非目标

• 动画.
• 非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更改.

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

资源

• 如何hue-rotate和sepia计算: /sf/answers/2066480321/ 例的Ruby实现:

  LUM_R = 0.2126; LUM_G = 0.7152; LUM_B = 0.0722
  HUE_R = 0.1430; HUE_G = 0.1400; HUE_B = …

  Run Code Online (Sandbox Code Playgroud)

我在http://www.mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript上找到了这个RGB到HSL脚本.我找不到任何其他小的体面的.问题是这段代码甚至不起作用.有谁知道为什么？(我不知道一点颜色数学,但也许它正在返回补充？)

function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - …

通过阅读HSL/HSV色彩理论,我得到的印象是色调分量是一个循环属性,每360度重复一次,并且可以独立于饱和度和亮度/值进行更改.如果我错了,请纠正我,但这些陈述逻辑上遵循先前的定义:

1. 旋转色调360度产生相同的颜色
2. 将色调旋转180度两次产生原始颜色
3. 将色调旋转180度,然后旋转-180度,得到原始颜色

但是,只有选项1是正确的.旋转色调4次+90度会产生与原始颜色甚至不相似的颜色.

此外,使用-webkit-filter和SVG

<filter><feColorMatrix in="SourceGraphic" type="hueRotate" values="..." /></filter>

不要为相同的旋转产生相同的结果.另一方面,SVG过滤器生成的颜色在浏览器中是一致的.

是否存在色调旋转的"隐藏"属性,使操作不相关？

webkit过滤器和SVG的示例可以在这里找到:http://jsfiddle.net/maros_urbanec/ARsjb/5/

我有一个平坦的红色.png图像,我希望通过使用CSS过滤器将其更改为特定的颜色.我认为这是最好的方法.

我正在使用SASS,通过使用它,我可以获得颜色的色调,饱和度和亮度.通过使用"红色"图像,这意味着色调的旋转度从0开始,因此通过使用hue-rotate我然后将其从0旋转到特定颜色的色调度.与饱和度和亮度相同.

filter: hue-rotate(hue(#50e3c2)) saturate(saturation(#50e3c2)) brightness(lightness(#50e3c2));

输出为:

filter: hue-rotate(166.53061deg) saturate(72.41379%) brightness(60.19608%); 如果我检查特定颜色的HSL是什么......

Hex: #50E3C2
HSL: 167° 72% 60%
RGB: 80 227 194

然而,当应用此图像时,图像是超暗的.看起来像正确的色调,但饱和度和亮度是错误的？

对我在哪里做错的任何想法？我看了一下这个例子:如何计算所需的色调旋转以生成特定的颜色？但似乎给了我同样的问题.

https://jsfiddle.net/gosj0ur2/

我有以下代码可以生成 PNG 图像的轮廓：

#silhouette img {
  -webkit-filter: grayscale(100%) brightness(0);
  filter: grayscale(100%) brightness(0);
  opacity: 0.6;
}

<div id="original">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>
<div id="silhouette">
  <img src="https://i.stack.imgur.com/JJ6Vs.png" height="150px" width="auto" />
</div>

我在 StackOverflow ( 1 , 2 , 3 )中发现了一些问题，但所有这些问题都集中在获得黑色/灰色的阴影/轮廓，而不是获得它的彩色版本（例如，我希望轮廓是红色或蓝色）。

我尝试使用这些解决方案和hue-rotate过滤器（应用于img或div），但没有得到任何好的结果。我猜这是因为一旦亮度设置为 0/100，轮廓就是黑/白，并且色调变化并不重要。

是否可以只使用 CSS 来做我想做的事情？怎么可能呢？

注意：我不想对图像进行着色，而是要对其进行完全着色，使用 CSS 而不覆盖的着色图像中的解决方案很好，但它们在我的情况下不起作用，因为它们所做的是对图像进行着色，因此它的色调不同一种颜色（正如您在我为每个解决方案创建的 JSFiddles 中看到的那样：1、2、3、4），而我想要的是拥有一个纯色轮廓，例如如下所示：

我需要在普通图像悬停时更改背景图像。（请不要建议我把它放到普通的背景图片中）

我使用 z-index 值尝试过这种方式，但它不起作用。这是填充它需要预加载图像，因此用户根本看不到图像加载。

img{
  width: 120px;
  position: relative;
    z-index: -1;
}

img:hover{
     background-image: url('https://i.ibb.co/bsQL6SK/media13-3-blue.png');
      background-position: center;
  background-repeat: no-repeat; 
  background-size: cover;
}

<img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt="">