html - 灰度+颜色叠加

Question

我正在尝试创建一种悬停效果，其中图像以全彩色开始，当我将鼠标悬停在图像上时，我希望它有一个蓝色覆盖层。

事实是，只有一个简单的蓝色叠加层，它只是在彩色图像之上放置一个半透明的蓝色 block ……这意味着其他颜色会稍微透过一点。我想要的是图像只是蓝色阴影。

现在，我已经设法让图像变成灰度，并且我已经设法得到蓝色叠加层，但是有什么方法可以让 CSS 叠加效果吗？将图像灰度化，然后在其上乘以颜色。

更简单的方法可能只是将效果创建为光栅图像，然后让它更改图像，但如果可以用代码来完成就更好了。

Answer 1

我认为您正在寻找 CSS filter 属性。在此处查看 David Walshe 的演示:http://davidwalsh.name/demo/css-filters.php

它目前是实验性的，我认为只有 Webkit 支持它，但这是使用 CSS 实现它的唯一方法。

您还可以查看 Adob​​e CSS 自定义过滤器:http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/

我想你想做的事情的演示:http://jsbin.com/igahay/3011/ (来自本主题:CSS image overlay with color and transparency)