当前位置:首页 > 技术教程 > 其他技术 > 正文内容

css3 greyscale实现去色图片黑白效果

xiaohan7个月前 (01-01)其他技术87

今天帮朋友看一效果,看到了手标滑过图片变为彩色的效果,很简单又兼容各大浏览器的,无非是准备两张图,一张黑白,一张彩色,滑过切换背景图或直接切换图片方法,当然,谁也不想这么复杂操作。

下面用css3安排一下

给标签加上下方css代码,即可变为黑白,也就是去色

filter: grayscale(100%);
filter: gray;

安排下兼容写法

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;

 如果要做滑过变为彩色,举个列子,网站页面一排排图片,均加了上方代码,变为黑白的,然后滑过让恢复颜色,如下方代码

初始代码

img{
    filter: grayscale(100%);
    filter: gray;
    }

滑过代码

img :hover{
    filter: grayscale(0);
    filter: none;
    }

整个网站变灰色直接给html安排即可!

版权声明:本站部分文章资源来源于网络搜集,如有侵犯到贵司利益请致信站长删除,Email:61018648@qq.com

本文链接:https://www.iso0.cn/post/79.html

分享给朋友:

相关文章

宝塔面板部署反向代理实现CDN效果教程

宝塔面板部署反向代理实现CDN效果教程

宝塔面板反向代理配置使用教程本教程以反代谷歌搜索为例。最下方有更新教程,反代自己的网站首先我们创建一个网站,只需填入域名即可,其他数据库不需要创建.PHP版本任意。然后因为谷歌是https的地址,我们...

VPS常用性能宽带测试、BBR加速一键脚本大全

VPS常用性能宽带测试、BBR加速一键脚本大全

几天没更新技术文章了,今天给大家分享一些VPS实用的性能、宽带测试一键脚本以及优化方法!分类汇总# 磁盘测试(快速测试模式) bash <(wget -qO-&n...

侯帅电商主图直通车图设计

侯帅电商主图直通车图设计

教程介绍在电商设计中,产品主图和直通车推广图是最重要的入口图,“消费者点不点进来、点进来看不看产品详情页”就靠它们了!产品主图和直通车图看似简单,但设计师很容易无从下手,花费大量时间却得不到吸睛效果。...

云服务器常用端口功能说明 认识vps安全组常用端口

当我们在购买国内云服务器的时候,出于安全考虑运营商会屏蔽一些不常用的端口,从而达到防扫的目的,增加服务器的安全性。而有很多朋友在初步接触服务器的时候,不懂什么是安全组,在安装软件的时候通常会受阻,比如...

5小时零基础入门小程序云开发

5小时零基础入门小程序云开发

课程介绍本套课程带领大家零基础入门小程序云开发。摆脱后台自己实现小程序后台,学会音视频小程序的开发,学会小程序图片的上传与管理,学习人工智能识别图片,用小程序模仿微信朋友圈,实现一个云相册。学习地址百...

Smokeping + Nginx 一键脚本:监测服务器网络

Smokeping + Nginx 一键脚本:监测服务器网络

不需要在独立的服务器上运行,脚本自动配置,监控你的服务器与大陆三大运营商、国际一些监测点之间的网络状况,基于 TCP网络协议。Smokeping + Nginx 安装:bash -c&nbs...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。