css 实现图片灰度
先看效果鼠标移入图片中摁下向左移动 图片由灰度变为原图 向右移动原图变灰度
代码如下：尚未做优化
<style>
*{
margin:0;
padding:0;
}
#img{
width: 380px;
height: 380px;
background: url('https://mmbiz.qpic.cn/mmbiz_jpg/CbE2tPnf9Co6ibIibPzSUkAhHbUcKP4RXV4zY0SgzydNJGvBjVEPqdBW2W4uISVpZOB7icGxv0EhBkDc20BgW9eaQ/640?wx_fmt=jpeg') center/cover;
overflow: hidden;
}
#test{
mix-blend-mode: hue;
width:380px;
height:380px;
position: relative;
left:0;
}
img{
height:380px;
width:760px;
position: relative;
left:0px;
}
</style>
</head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<body >
<div id='img'>
<div id="test">
<img src="test.png" alt="" draggable="false">
</div>
</div>
<script>
let startX
let offleft
$('#img').mousedown((ev)=>{
startX=$(ev)[0].clientX
offleft = $('img').offset().left
$('#img').bind('mousemove',Move)
})
$('#img').mouseup(()=>{
$('#img').unbind('mousemove',Move)
})
function Move(ev){
let endX=ev.clientX
let goX = startX - endX
let go= offleft - goX
$('img').css({"left": go+"px"})
}
</script>
</body>
初始这个效果想利用svg 实现或者canvas 实现，但是这2中方案后来都被否决了，因为这个灰度相当于透明的遮罩层，通过遮罩层是图片看起来变灰色，如果使用多张图片也不好实现，最终找到了这个属性<blend-mode>：
混合模式是当层重叠时计算像素最终颜色值的方法，每种混合模式采用前景和背景颜色值（分别为顶部颜色和底部颜色），执行其计算并返回颜色值。最终的可见层是对混合层中的每个重叠像素执行混合模式计算的结果。
图片灰度上层为下图：
当然直接使用背景颜色为灰色也可以实现；使用这个图片效果会跟好看一点
css 实现图片灰度的更多相关文章
- CSS 实现图片灰度效果 兼容各种浏览器
CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...
- CSS 实现图片灰度效果
非原创-从网上收索出来的文章 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. 方式1. IE滤镜 img ...
- css 改变图片灰度颜色
我一直喜欢灰度图像因为我认为他们看起来更有艺术感.很多图片编辑如Photoshop很容易把你的彩色图像变成灰度.甚至有选择调整颜色深度和色调.不幸的是,这样的效果想做在网络上并不容易,因为浏览器有差异 ...
- 使用CSS将图片转换成黑白(灰色、置灰)z转
小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...
- 转: 用css把图片转为灰色图
小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...
- 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]
小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...
- 学习笔记 第六章 使用CSS美化图片
第六章 使用CSS美化图片 6.1 在网页中插入图片 GIF图像 跨平台能力,无兼容性问题: 具有减少颜色显示数目而极度压缩文件的能力,不会降低图像的品质(无损压缩): 支持背景透明功能,便于图像 ...
- Django调用JS、CSS、图片等静态文件
zz 在下面的例子中,我们将media作为静态(CSS\JS\图片文件)文件的目录 方法一. 1.首先在settings.py文件中自定义参数 STATIC_PATH=’./media’ .(意为当前 ...
- Atitit 图像处理 灰度图片 灰度化的原理与实现
Atitit 图像处理 灰度图片 灰度化的原理与实现 24位彩色图与8位灰度图 首先要先介绍一下24位彩色图像,在一个24位彩色图像中,每个像素由三个字节表示,通常表示为RGB.通常,许多24位彩色图 ...
随机推荐
- gym/101873/GCPC2017
题目链接:https://codeforces.com/gym/101873 C. Joyride 记忆化搜索形式的dp #include <algorithm> #include < ...
- C#客户端程序Visual Stadio远程调试
一,需求来源 在开发过程中,可能会要使用Win7 ,Win8 ,Win10等不同版本的系统去做兼容性调试,也有时候会去针对特别的显卡,无线网卡等等硬件设备的机器做优化,有一种较优的方案,那就是使用Vi ...
- IDEA中创建maven web项目
本文将带你一路从IDEA中maven的配置到创建maven web项目,掌握IDEA中maven的使用. 一.IDEA中配置maven 开发中一般我们使用自己下载的maven,不使用IDEA工具自带的 ...
- 深入拆解Java虚拟机视频教程
目录: 第1节说在前面的话 00:05:07分钟 | 第3节环境搭建以及jdk,jre,jvm的关系 00:20:48分钟 | 第5节jvm再体验-jvm可视化监控工具 00:21 ...
- virtualbox下给centos7固定ip
在virtualbox桥接连接模式下,固定虚拟机的ip. 修改/etc/sysconfig/network-scripts/ifcfg-ens33文件 添加如下信息: 保存 重启网卡: sudo se ...
- Linux中设置静态ip地址
电脑64位,安装的是VMware12,虚拟机名称E3-dubbo-register 1.查看主机的IP地址 win+R-->cmd-->ipconfig (记住,后面要用) 2.将该虚 ...
- 【学习笔记】第三章 python3核心技术与实践--Jupyter Notebook
可能你已经知道,Python 在 14 年后的“崛起”,得益于机器学习和数学统计应用的兴起.那为什么 Python 如此适合数学统计和机器学习呢?作为“老司机”的我可以肯定地告诉你,Jupyter N ...
- Java中关于泛型集合类存储的总结
集合类存储在任何编程语言中都是很重要的内容,只因有这样的存储数据结构才让我们可以在内存中轻易的操作数据,那么在Java中这些存储类集合结构都有哪些?内部实现是怎么样?有什么用途呢?下面分享一些我的总结 ...
- Uva 232 一个换行WA 了四次
由于UVA OJ上没有Wrong anwser,搞的多花了好长时间去测试程序,之前一直以为改OJ有WA,后来网上一搜才知道没有WA,哎哎浪费了好长时间.此博客用来记录自己的粗心大意. 链接地址:htt ...
- 01.Django基础一之web框架的本质
一 web框架的本质及自定义web框架 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端,基于请求做出响应,客户都先请求,服务端做出对应的响 ...