相关疑难解决方法(0)

我尝试使用如下背景属性为图像着色:

.image-holder:hover {
  opacity: 1;
  transition: opacity 1s, background 1s;
  background: #EBEFF7;
}

.image-holder {
  height: 250px;
  width: 200px;
  opacity: 0.5;
  transition: opacity 1s, background 1s;
}

<div class="image-holder">
  <img src="https://dummyimage.com/200x200/fff/000000.png" />
</div>

http://jsfiddle.net/6ELSF/1047/

但是图像并没有像预期的那样"着色".

在悬停时它看起来像这样:

但我希望它看起来像这样:

我试图测试一些我发现的关于图像叠加的解决方案但是在我的例子中都没有.如何以最简单的方式实现这一目标？

通过阅读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/

我有一个 CP437 瓷砖集：

我想将其用作网页上的 CSS 精灵 目前，我有一个非常简单的标记和 css：

.tile {
    display: inline-block;
    width: 16px;
    height: 16px;
}

.cp437-0 {
    background: url('tileset/tileset.png') 0 0;
}

.cp437-1 {
    background: url('tileset/tileset.png') 16px 0;
}

// ...

<span class="tile, cp437-0">&nbsp;</span>

这非常有效，但我还想为这些灰度精灵添加颜色。如何使用 HTML/CSS 或 Javascript 来做到这一点？

是否可以为生成的图像设置背景颜色？

澄清：

我希望能够使用精灵将这些内容绘制到浏览器窗口：

随着 v5 的发布，Bootstrap 更新了多个组件的样式，包括关闭按钮。在 v5 之前，“x”是可以轻松设置样式的文本，包括从父级继承颜色。然而现在，该按钮使用背景 SVG 图像进行样式设置：

.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .25em .25em;
  color: #000;
  background: transparent url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e) center/1em auto no-repeat;
  border: 0;
  border-radius: .25rem;
  opacity: .5;
}

在调整颜色方面，有一种使用 CSS 过滤器反转颜色的.btn-close-white 变体，但我想要特定的颜色。包含原始 SCSS 文件时，您可以更新$btn-close-color变量以更改颜色。但是，我在将 …

我正在尝试使用CSS过滤器模拟Photoshop的"颜色叠加",同时这样做,发现CSS过滤器对颜色的操作与癫痫发作一致.

考虑一下颜色#FF0000.如果我们旋转它的色调120deg,我们应该得到#00FF00,并且240deg我们应该得到#0000FF.这是理智的领域.现在让我们进入CSS过滤器:

body { font: bold 99px Arial }
span { color: #F00; }
.daltonics-wont-notice {
    -webkit-filter: hue-rotate(120deg);
    filter: hue-rotate(120deg);
}
.precision-is-overrated {
    -webkit-filter: hue-rotate(240deg);
    filter: hue-rotate(240deg);
}

<span class="red">?</span>
<span class="daltonics-wont-notice">?</span>
<span class="precision-is-overrated">?</span>

什么应该#00FF00是#007100,而且应该是什么#0000FF是#0132FF.通过使用hue-rotate,色调,饱和度和亮度已设置为无意义的级别,跨浏览器.

我需要赶上Cthulhu并找出他编码的逻辑,以便我可以解决它.

这是一个与HSV或HSL无关的奇怪色彩空间吗？是否有可能将HSV,HSL或RGB坐标转换为这种异想天开的维度？它有名字吗？一个标准？邪教跟随？

我在玩SVG（试图用SVG替换图标字体。）我得到它来使用对象标记渲染图像/ svg。但是，我无法从CSS更改颜色。假设我更喜欢从CSS为它着色，当我用来嵌入SVG时，有没有办法做到这一点。

   <object class="partnerLogo" type="image/svg+xml" data="assets/logos/sample.svg">
           Your browser does not support SVG
   </object>

CSS，到目前为止，我尝试过：

.partnerLogo {
    width: 100%;
    height: 100px;
    color: red;
    color-fill: red;
}

在sample.svg文件中，我<?xml-stylesheet type="text/css" href="../css/styles.css"?>刚刚添加了

styles.css已添加到页面。

谢谢！

有没有办法创建一个 SASS mixin 来从一个十六进制值创建一个 CSS 过滤器？我有不同颜色的 SVG 图像，具体取决于站点，并且讨厌硬编码所有过滤器。

#000000

to

filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(7500%) hue-rotate(18deg) brightness(115%) contrast(115%);

下面是 Javascript 中的一个示例，用于获取十六进制并输出以下内容

https://codepen.io/sosuke/pen/Pjoqqp

我有这个笔,我已经做了一个SVG Sprites技术的例子:

<svg xmlns="http://www.w3.org/2000/svg"style="position:absolute;top:-9999px;opacity:0;">    
    <symbol viewBox="0 0 64 64" id="circle">
        <title>circle</title>
            <path fill="#1D1D1B" d="M32,0C14.327,0,0,14.327,0,32c0,17.673,14.327,32,32,32s32-14.327,32-32C64,14.327,49.673,0,32,0z M32,52.5c-11.322,0-20.5-9.178-20.5-20.5S20.678,11.5,32,11.5S52.5,20.678,52.5,32S43.322,52.5,32,52.5z"/>
    </symbol>
    <symbol viewBox="0 0 56.983 64.804" id="polyline">
        <title>polyline</title>
            <polyline fill="#1D1D1B" points="0,64.804 30.726,0 56.983,0 56.983,54.749 29.33,27.095 "/>
    </symbol>
</svg>

<svg class="circle">
    <use xlink:href="#circle"></use>
</svg>

<svg class="polyline">
    <use xlink:href="#polyline"></use>
</svg>

我想用CSS应用它:

.circle {
    fill: #f00;
}
.polyline {
    fill: #00f;
}

我的问题是我无法更改添加到spritesheet的元素的填充颜色.我已经查找了有关如何正确执行此操作的信息,我认为我的方法是正确的,但似乎并非如此.

在另一支钢笔中,我认为用同样的方式编写,工作正常.我究竟做错了什么？

如果我犯了任何错误,对不起我的英语,这不是我的母语.

我想在画布中更改图像的颜色

这是形象

你可以看到有一个透明的图像我尝试使用PutImgData但我的透明颜色正在改变颜色是否还有改变汽车和金钱的颜色？我使用的是这段代码:

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");
canvas.height = canvas.width = 100;
ctx.fillStyle = 'red';
ctx.fillRect(10,10,20,10);
ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 45, 45),
    pix = imgd.data;

for (var i = 0, n = pix.length; i <n; i += 4) {
    if(pix[i+3]==0)
  {continue;}
    pix.length[i]=r|pix.length[i];
  pix.length[i+1]=g|pix.length[i+1];
  pix.length[i+2]=b|pix.length[i+2];
   pix[i + 3] = 255;
}

ctx.putImageData(imgd, 0, 0);

我有一整段代码filter: invert(0.85)应用了CSS规则.

在这个块中,我有一个图像,当然也遵循这个CSS规则,并且是倒置的.

我需要恢复这个invert()图像.

可能吗？我试过了invert(1),但是图像并不像以前那样完全,它仍然有点倒置(由于第一个invert只是0.85而不是1)

看这个例子:

body{
  font-size: 0;
}

div{
  display: inline-block;
  width: 50%;
}

.filter{
  filter: invert(0.85);
}

.filter img{
  filter: invert(1);
}

<div class="initial">
  <img src="https://s7d1.scene7.com/is/image/PETCO/cat-category-090617-369w-269h-hero-cutout-d?fmt=png-alpha" alt="">
</div>
<div class="filter">
  <img src="https://s7d1.scene7.com/is/image/PETCO/cat-category-090617-369w-269h-hero-cutout-d?fmt=png-alpha" alt="">
</div>