加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

html – 灰度颜色叠加

发布时间:2020-12-14 16:39:40 所属栏目:资源 来源:网络整理
导读:我正在尝试创建一个悬浮效果,其中图像以全彩色开始,当我将鼠标悬停在图像上时,我希望它具有蓝色叠加. 事实上,只需要一个简单的蓝色覆盖层,就可以在彩色图像的顶部放置一个半透明的蓝色块……这意味着其他颜色会显示一点点.我想要的是图像只是蓝色阴影. 现在,
我正在尝试创建一个悬浮效果,其中图像以全彩色开始,当我将鼠标悬停在图像上时,我希望它具有蓝色叠加.

事实上,只需要一个简单的蓝色覆盖层,就可以在彩色图像的顶部放置一个半透明的蓝色块……这意味着其他颜色会显示一点点.我想要的是图像只是蓝色阴影.

现在,我已经设法让图像变为灰度,我已经设法获得蓝色叠加,但有没有办法让CSS来叠加效果?转动图像灰度,然后将颜色乘以它.

更简单的方法是将效果创建为光栅图像,然后让它更改图像,但如果可以在代码中完成,那就更好了.

解决方法

我想你正在寻找CSS过滤属性.请参阅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)

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读