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

Question

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

请帮帮我

Answer 1

您可以使用新属性 filter 但浏览器支持不是很深(参见 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;
}