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

Question

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

请帮帮我

Answer 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;
}