logo标签列表

如何在CSS中给图像上色？

imagecsscolors
8

有没有一种跨浏览器的方法可以使用CSS来改变图像的色调。例如，如果我有一个灰度图标（一个img元素），我希望在悬停时将其颜色更改为棕褐色。

它必须适用于除IE以外的其他浏览器，因此我不能使用滤镜。是否有某种CSS 3技巧可以实现这一点？

1
我不知道任何相关信息。不过，这是个好问题。+1 - Madara's Ghost
很可能无法使用CSS实现，但是您可以通过一些Javascript和<canvas>来实现。 - Gabriele Petrioli
我认为用 CSS 不可能实现，你可以使用 HTML5 的 canvas 元素。 - haynar
请查看这个页面。可能会有用。http://www.w3.org/Graphics/fx/wiki/CSS_Image_Transitions - Fatih Acet
请查看这个 jQuery 库 http://www.netzgesta.de/instant/ - Fatih Acet
显示剩余2条评论
5个回答
5

如果你想在CSS中修改一张图片，是不可能的。但是你可以玩转opacity属性。是的，这只能设置图片的透明度，但它会产生很好的效果。下面是一个例子：

img{-webkit-transition:opacity .3s ease-in-out;}
img:hover{opacity:.6}

那段代码将会给图片提供一个渐变的淡入淡出效果，并且能够使图片透明。在其他情况下，您可以使用图像精灵来完成您想要的效果 :)
2

在CSS中没有一种准确的方法来实现这个，正如已经提到的，你可以利用其他技术来实现 - 即Javascript。

从非常基本的意义上讲，你可以尝试通过在图像上叠加一个带有类似于棕褐色的颜色和不透明度rgba(94, 38, 18, 0.2)的div来模仿棕褐色风格，但这种方法相当粗糙。你甚至可以使用透明图像进行覆盖，这可能比这个选项好（但仍然相当糟糕）。

1
1
多年后的更新：是的，你可以在CSS中给图像上色。
我已经要求关闭这个问题，因为它是一个重复的问题，但可能不会发生，因为它非常古老了。无论如何，目前被接受的答案是：
“如果你想在CSS中修改图像，是不可能做到的。”
其他答案中的这个说法在当时是正确的，但多年来已经不正确了。
CSS滤镜允许你实现这一点。
从CSS滤镜使元素变成单一颜色的链接中可以找到更多信息。
filter: grayscale(100%) sepia(100%) hue-rotate(90deg);

有一个在线工具可以生成着色图像所需的滤镜。

我甚至都记不起最初为什么需要这个了，哇，已经过去十二年了，但知道现在是可能的让我感到高兴。谢谢你的答案！ - Goran Jovic
0

我知道回答这个话题已经很晚了，但我一直想做和你一样的事情，却找不到答案。但第一个人给了我启示。

我需要的是：一张图片被某种颜色着色，当我悬停在它上面时，它会恢复正常。所以我做了什么，我将背景颜色设置为我想要的颜色，然后降低了它的透明度。所以我得到了彩色的图像。当我悬停在它上面时，我将背景设置为透明，图像完全不透明。所以使用CSS可以通过背景颜色和不透明度对图像进行着色。

img {
    background-color: rgba(122, 122, 122, 1);
    opacity: 0.5;
    transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
}

img:hover {
    color: rgba(255, 255, 255, 0);
    opacity: 1;
    transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
}

对我来说它很好用。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接