灰度图像到彩色图像的 CSS RGBA 颜色代码

【问题标题】：CSS RGBA Color code for grayscale image to colorised image灰度图像到彩色图像的 CSS RGBA 颜色代码
【发布时间】：2014-05-08 11:14:20
【问题描述】：

我想通过 CCS3 创建简单的悬停效果，例如默认图像是黑白的，但是当我将鼠标悬停在此图像上时，将显示此图像的实际颜色。

请帮帮我

【问题讨论】：

展示一些你研究过的代码
背景色：rgba(0 0 0 0);我得到了那个但不工作。

标签： css colors rgb rgba

【解决方案1】：

您可以使用新属性 filter，但对 broswer 的支持不是很深（请参阅 http://caniuse.com/css-filters）

JSfiddle Demo

CSS

img {
    -webkit-filter:grayscale(100%);
}

img:hover {
    -webkit-filter:none;
}

替代方法

这需要一个包装 div 和第二个彩色背景图片

JSfiddle

HTML

<div class="wrap">
    <img src="http://lorempixel.com/output/abstract-q-g-250-250-8.jpg" alt=""/>
 </div>

CSS

.wrap {
    display: inline-block;
    background-image: url(http://lorempixel.com/output/abstract-q-c-250-250-8.jpg);
}

img {
    display: block;
}

.wrap img:hover {
    opacity:0;
}

【讨论】：