相关疑难解决方法(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)

我有一个背景图像的div,我想扩展100%宽度并自动缩放div以适应图像所需的高度.目前它没有缩放div高度,除非我将div的高度设置为100%但是它只是伸展到屏幕的整个高度,而我希望它缩放到图像的高度.

这是html:

<div id="mainHeaderWrapper">


</div><!--end mainHeaderWrapper-->
<br class="clear" />;

这是css:

    #mainHeaderWrapper{


     background: url(http://localhost/site/gallery/bg1.jpg);
     width: 100%;
     height: auto;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover; 
     background-size: 100% 100%;

     background-repeat: no-repeat;
     background-position: center center; 

 }

 .clear { clear: both; }

感谢您的帮助

我知道有很多css过滤器,特别是对于webkit,但我找不到一个白色(#FFFFFF)图像着色的解决方案.我尝试了一些过滤器的组合,但没有一个使我的图像着色.我只能改变灰度或棕褐色范围内的图像.

所以我的问题是:有没有办法只使用css将我的全白png改为(例如)red？

如此图所示:

我有一个黑色的心PNG图像我想用不同的颜色显示.如何使用javascript/css/jquery更改心脏的颜色？

我正在努力打造一名衬衫设计师.所以背景是衬衫,心脏是印花设计(以及其他形状).

PS我知道这已经是重复但似乎没有任何解决方案有帮助.希望你们能帮助我,如果你已经这样做了.非常感谢!

解决方案更新:

解决方案是使用canvas.发现我的解决方案在这里.这是代码:

<h4>Original Image</h4>
<img id="testImage" src='black-heart.png'/>

<h4>Image copied to canvas</h4>
<canvas id="canvas" width="128" height="128"></canvas>

<h4>Modified Image copied to an image tag</h4>
<img id="imageData"/>



<script>
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 128, 128),
    pix = imgd.data,
    uniqueColor = [0,0,255]; // Blue for an example, can change this value to be anything.

// Loops through all of the pixels and modifies the components.
for …

我试图弄清楚如何改变半透明和半纯色图像的颜色.

我希望能够改变白色的颜色,这样我就可以添加悬停,并添加一种动态方式来改变wordpress中的颜色.使用photoshop来填充图像不是一种选择,因为我将在我的Wordpress主题中构建一个换色器.

我使用了一个名为JFlat.js的jQuery脚本,因为它看起来完全像我需要的那样.虽然它对我来说似乎根本不起作用.按照我猜测的确切步骤,因为它使用了旧版本的jQuery.

有人能给我一些帮助吗？

这是图片上的黑色版本,你看不到白色版本所以我会发布这个版本以更好地了解我所说的内容.

当输入类型设置为时间时，我试图更改出现在输入框中的小时钟图标的颜色。

我正在谈论的 HTML 标签可以在下面看到：

<input class="timeBox" type="time" value="13:30"/>

我想让图像看起来有点透明？我真的不知道如何描述它，但就像你可以在上面写文字，图像在后面。

这是否可以使用 css 或 javascript 或任何其他语言？

实际上是否可以在 CSS 中的透明 PNG 图像上应用背景颜色？这是一个例子：

使用CSS，转动这个图像

使用类似这样的 CSS 代码background-color: rgba(0,0,300,.5)

全部都是完整的 CSS（当然还有 HTML）？

谢谢。

所以我有这个图像：

如何仅使用 CSS 将灰线更改为黑色？

该图像是一个 png 文件，我想保留白色背景。

编辑： 这个答案不是重复的，因为它也改变了背景，这不是我想要的。

我在网页中有一个图标：

<div class='icon-container'>
    <img src = "img/gavel3.png" class="gavel-icon" style='vertical-align:center;width:80px;'>
</div>

我正在尝试用颜色替换此图像中的黑色：#2a4f6c仅使用 CSS。我尝试使用 Photoshop 用这种颜色替换黑色，但它看起来很糟糕而且有颗粒感。是否可以使用纯 CSS 解决方案？

下面有问题的图片。

是否有可能从引导程序v2.3.2更改字形的颜色，而无需在引导程序v3.x中进行迁移？例如，我使用此类：

<i class="icon-edit"></i>

如果您能帮助我，我会很高兴。

问候，

如何仅使用 CSS 拍摄仅包含白色和透明像素的图像（示例）并重新着色为红色或橙色？

以下问题之前曾被问过 -

通过CSS改变PNG图像的颜色？

答案说使用过滤器，但没有指出哪种过滤器组合可以使其发挥作用。是否有任何滤镜组合可以让我将透明白色图像更改为红色？

澄清一下：我想重新着色图像的白色部分，而不是背景颜色。例如，我想要它是透明的红色。

img {
  -webkit-filter: brightness(50%) saturate(200%) hue-rotate(90deg);
  }

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>