专注前端行业精选
css3 greyscale实现去色 css3实现图片或页面变为黑白效果
作者:鹏仔先生日期:2020-06-03浏览:756分类:CSS
今天帮朋友看一效果,看到了手标滑过图片变为彩色的效果,很简单又兼容各大浏览器的,无非是准备两张图,一张黑白,一张彩色,滑过切换背景图或直接切换图片方法,当然,谁也不想这么复杂操作。
下面用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 即可安排
手机扫码访问
猜你还喜欢
- 02-25 JS判断某个时间戳是否为当天时间
- 02-07 vue使用viewerjs实现图片点击放大
- 02-05 vue实现点击刷新页面 H5实现刷新页面
- 02-04 H5移动端项目实现手写签名功能 vue实现手写签名
- 02-04 vue移动端使用Vconsole Vconsole使用
- 02-04 vue中如何点击返回上一页,vue判断没有上页返回首页
- 11-25 小程序中 时间戳转日期格式(年月日时分秒)封装使用
- 11-25 小程序中button的边框无法去除 button边框如何去除
- 11-19 微信小程序 接口请求封裝
- 11-06 VUE中实现输入框禁止输入小数方法分享
- 10-29 vue表单验证 input输入框禁止输入空格
- 10-27 iView 日期时间选择器设置开始时间至结束时间限制
暂无评论,来添加一个吧。