使用CSS在悬停上着色图像

I am wondering if it is possible to recolour images using CSS.

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

Here is an example fragment showing what I want to do (you can play with it here: http://jsfiddle.net/NPmUX/)

这是一个示例片段,显示了我想要做的事情(你可以在这里玩它: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;
}

The link tag contains inline and background images. When rolled over, the text changes colour. Is it possible to also change the colour of either image type?

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

I have been playing about with CSS3 Filters (in Chrome - other browsers don't support them yet) but hue-rotate doesn't work (presumably because the images are monochrome to start with).

我一直在玩CSS3过滤器(在Chrome中 - 其他浏览器还不支持它们)但是色调旋转不起作用(大概是因为图像是单色开始)。

Is there a way to colorize the images either with filters or by another technique?

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

(Obviously I could just create lots of differently-coloured image files in Photoshop... I am hoping for a programmatic solution)

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

Thank you

5 个解决方案

#1

One trick I use make the image and actual mask, so the icon is transparent and the border is white (or whatever the background is).

我使用的一个技巧是制作图像和实际蒙版,因此图标是透明的,边框是白色的(或者背景是什么)。

Wrap the image in a div (or set it as the background of a div)

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

Then you can change the background color of the wrapping div to whatever you like, just like the text and the icon will be that color.

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

This solution only works on a solid color background.

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

#2

If you use an iconic font, you can then handle it just as text.

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

Well, it is text.

嗯,这是文字。

A search for CSS icon font will get you a lot of resources.

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

One good resource to begin with is fontello

一个很好的资源开始是fontello

The easy way is to choose an icon from the already provided in different libraries.

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

Else, there is the posibility to draw it using vector tools

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

#3

You can use SVGs and change the colors in CSS.

您可以使用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

#4

I'm sure you've researched this extensively and you said you've been messing around with filters, so it wouldn't surprise me if you already know you can change an image color hue, saturation, grayscale, etc with webkit filters. Which by definition, it colorizing

我相信你已经广泛研究了这个并且你说你一直在搞乱过滤器,所以如果你已经知道你可以用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

#5

if possible

use .farbtastic jquery

使用.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;}

#1