Question

我想知道是否可以使用CSS重新着色图像。

这是一个示例片段，显示我想要做的事情（你可以在这里玩它：http://jsfiddle.net/NPmUX/）

HTML

<a href="#" class="upgrade_link cannons"><strong>Autoblaster (5)</strong><br>
Attack: Attack 1 ship. Your <img title="hit" class="inline_action_icon" src="http://xwing-builder.co.uk/images/hit_icon.png"> results cannot be cancelled by defense dice. The defender may cancel <img title="critical" class="inline_action_icon" src="http://xwing-builder.co.uk/images/critical_icon.png"> results before <img title="hit" class="inline_action_icon" src="http://xwing-builder.co.uk/images/hit_icon.png"> results. Attack value: 3. Range 1.</a>

CSS

.upgrade_link {
    background-position: 0 2px;
    background-repeat: no-repeat;
    color: #000000;
    display: block;
    margin-bottom: 10px;
    margin-top: -2px;
    padding-left: 28px;
    transition: color 0.2s ease 0s;
    text-decoration: none;
}

.upgrade_link.cannons {
    background-image: url("http://xwing-builder.co.uk/images/cannon_icon_lg.png");
}

.inline_action_icon {
    margin-top: -2px;
    vertical-align: middle;
}

.upgrade_link:hover {
    color: #597690;
}

链接标记包含内嵌和背景图像。翻转时，文本会改变颜色。是否也可以改变任何一种图像类型的颜色？

我一直在玩CSS3 Filters（在Chrome中 - 其他浏览器还不支持它们）但是色调旋转不起作用（大概是因为图像是单色的）

有没有办法用过滤器或其他技术为图像着色？

（显然我可以在Photoshop中创建大量不同颜色的图像文件......我希望有一个程序化的解决方案）

谢谢

Answer 1

我使用的一个技巧是制作图像和实际遮罩，因此图标是透明的，边框是白色的（或者背景是什么）。

将图像包裹在div中（或将其设置为div的背景）

然后您可以将包装div的背景颜色更改为您喜欢的任何颜色，就像文本和图标一样。

此解决方案仅适用于纯色背景。

Answer 2

您可以使用SVG并更改CSS中的颜色。

<svg>
    <circle cx="50" cy="50" r="50"/>
</svg>

CSS：

circle {
  fill: black;
}
circle:hover {
  fill: red;
}

http://jsbin.com/yayojeboku/1/edit?html,css,output

Answer 3

我相信你已经广泛研究了这个，你说你一直在搞乱过滤器，所以如果你已经知道你可以改变图像颜色色调，饱和度，灰度等等，我不会感到惊讶webkit过滤器。根据定义，它着色

.saturate {-webkit-filter: saturate(5);}
.grayscale {-webkit-filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%);}
.sepia {-webkit-filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%);}

DEMO HERE

Answer 4

如果您使用标志性字体，则可以像文本一样处理它。

嗯，是文字。

搜索 CSS图标字体将为您提供大量资源。

一个很好的资源是fontello

简单的方法是从已在不同库中提供的图标中选择一个图标。

否则，可以使用矢量工具绘制它

Answer 5

如果可能

使用.farbtastic jquery

HTML

 <div id="colorpicker"></div>
<img src="http://i40.tinypic.com/6rt5sj.png" border="0">

jquery的

$('#colorpicker').farbtastic(function(color){
    $('img').css("background-color",color);
});

css color

img{background-color:red;}

使用CSS在悬停上着色图像

5 个答案: