css 实现图片灰度

最新推荐文章于 2023-01-29 09:33:31 发布

瘦子先生

最新推荐文章于 2023-01-29 09:33:31 发布

阅读量1.2k

点赞数

分类专栏： css 文章标签：图片灰度移动阴影遮罩 css 图片变灰

本文链接：https://blog.csdn.net/L_shouzi/article/details/102459556

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

代码如下：尚未做优化

<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>：

混合模式是当层重叠时计算像素最终颜色值的方法，每种混合模式采用前景和背景颜色值（分别为顶部颜色和底部颜色），执行其计算并返回颜色值。最终的可见层是对混合层中的每个重叠像素执行混合模式计算的结果。

图片灰度上层为下图：

当然直接使用背景颜色为灰色也可以实现；使用这个图片效果会跟好看一点

瘦子先生

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css 实现图片灰度

先看效果鼠标移入图片中摁下向左移动图片由灰度变为原图向右移动原图变灰度代码如下：尚未做优化<style> *{ margin:0; padding:0; } #img{ width: 380px; height: 380px; background: url('htt...
复制链接

扫一扫