我正在尝试创建一种悬停效果,其中图像以全彩色开始,当我将鼠标悬停在图像上时,我希望它有一个蓝色覆盖层。
事实是,只有一个简单的蓝色叠加层,它只是在彩色图像之上放置一个半透明的蓝色 block ……这意味着其他颜色会稍微透过一点。我想要的是图像只是蓝色阴影。
现在,我已经设法让图像变成灰度,并且我已经设法得到蓝色叠加层,但是有什么方法可以让 CSS 叠加效果吗?将图像灰度化,然后在其上乘以颜色。
更简单的方法可能只是将效果创建为光栅图像,然后让它更改图像,但如果可以用代码来完成就更好了。
最佳答案
我认为您正在寻找 CSS filter
属性。在此处查看 David Walshe 的演示:http://davidwalsh.name/demo/css-filters.php
它目前是实验性的,我认为只有 Webkit 支持它,但这是使用 CSS 实现它的唯一方法。
您还可以查看 Adobe CSS 自定义过滤器:http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/
我想你想做的事情的演示:http://jsbin.com/igahay/3011/ (来自本主题:CSS image overlay with color and transparency)
关于html - 灰度+颜色叠加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22153292/