先看效果鼠标移入图片中摁下向左移动 图片由灰度变为原图   向右移动原图变灰度

​

代码如下：尚未做优化

<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 实现图片灰度的更多相关文章

  1. CSS 实现图片灰度效果 兼容各种浏览器

    CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...

  2. CSS 实现图片灰度效果

    非原创-从网上收索出来的文章 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. 方式1. IE滤镜 img ...

  3. css 改变图片灰度颜色

    我一直喜欢灰度图像因为我认为他们看起来更有艺术感.很多图片编辑如Photoshop很容易把你的彩色图像变成灰度.甚至有选择调整颜色深度和色调.不幸的是,这样的效果想做在网络上并不容易,因为浏览器有差异 ...

  4. 使用CSS将图片转换成黑白(灰色、置灰)z转

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...

  5. 转: 用css把图片转为灰色图

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...

  6. 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]

        小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...

  7. 学习笔记 第六章 使用CSS美化图片

    第六章  使用CSS美化图片 6.1  在网页中插入图片 GIF图像 跨平台能力,无兼容性问题: 具有减少颜色显示数目而极度压缩文件的能力,不会降低图像的品质(无损压缩): 支持背景透明功能,便于图像 ...

  8. Django调用JS、CSS、图片等静态文件

    zz 在下面的例子中,我们将media作为静态(CSS\JS\图片文件)文件的目录 方法一. 1.首先在settings.py文件中自定义参数 STATIC_PATH=’./media’ .(意为当前 ...

  9. Atitit 图像处理 灰度图片 灰度化的原理与实现

    Atitit 图像处理 灰度图片 灰度化的原理与实现 24位彩色图与8位灰度图 首先要先介绍一下24位彩色图像,在一个24位彩色图像中,每个像素由三个字节表示,通常表示为RGB.通常,许多24位彩色图 ...

随机推荐

  1. C#开发BIMFACE系列19 服务端API之获取模型数据4：获取多个构件的共同属性

    系列目录     [已更新最新开发文章,点击查看详细] 在前几篇博客中介绍了一个三维文件/模型包含多个构建,每个构建又是由多种材质组成,每个构建都有很多属性.不同的构建也有可能包含相同的属性. 上图中 ...

  2. zstu19一月月赛 duxing201606的原味鸡树

    duxing201606的原味鸡树 题意: 给定一颗有n(n<=1e9)个节点的完全二叉树,1e5次询问,问某个节点有几个子节点. 思路: 自己在月赛上没有思路,问了zfq才知道. 设两个指标, ...

  3. ICPC 2018 Asia Hanoi Regional Contest

    A. Amazing Adventures B. Bipartite Battle solved by rdc 135min sdcgvhgj 打表找出了规律,发现 sg 值只和点数和边数的奇偶性有关 ...

  4. dp递推 数字三角形，dp初学者概念总结

    数字三角形(POJ1163)          在上面的数字三角形中寻找一条从顶部到底边的路径,使得路径上所经过的数字之和最大.路径上的每一步都只能往左下或 右下走.只需要求出这个最大和即可,不必给出 ...

  5. ☆1003 Dijstra

    循环N次 算法分为两部分: 1)找到距离最小的城市,找不到距离更小的城市时退出方法 2)更新距离 实际操作时,先初始化: 更新dis为INF,更新dis[start] = 0: 变种: 找最短路径的条 ...

  6. 告别组件之教你使用原生js和css写移动端轮播图

    在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...

  7. HTML连载36-精灵图练习、边框属性（上）

    一.精灵图练习 练习:用精灵图表示出“RUI” 工具:Adobe Fireworks 方法:(1)打开Adobe Fireworks(2)选取一张26个英文字母图片 (3)先把我们这张图片的图层锁定, ...

  8. 还不会用 K8s 集群控制器？那你会用冰箱吗？（多图详解）

    作者 | 阿里云售后技术专家 声东 导读:当我们尝试去理解 K8s 集群工作原理的时候,控制器(Controller)肯定是一个难点.这是因为控制器有很多,具体实现大相径庭:且控制器的实现用到了一些较 ...

  9. 对TD tree系统评价及改进

    该系统是由石家庄铁道大学2017级信息学院的同学研发并改进,分享给我们18级新生的一份体验,这项app可安装在任意一个智能手机上,当听到学长们像我们介绍这款app的时候,着实让我惊呆了,惊叹学长们的编 ...

  10. 2018阿里前端 - 认真写下阿里的面筋，祝福大家收到满意的offer（前端向）

    作者:叮!阿里offer请查收!链接:https://www.nowcoder.com/discuss/102509来源:牛客网 首先表达一下对阿里面试官的感谢,以及大公司的气魄——没有因为不是科班出 ...