今天突然看到一篇文章，说是用 JS 实现拖拉展示彩色和黑白的图片效果，就是那种图片对比的效果，大概效果就是这样的：
这个效果在很多图片处理的相关页面中会出现。不过在这里突然看到有人提到用 JS 来实现，如果只是纯粹为了展示看效果，没有其他需求的话，其实完全可以直接使用 CSS 来实现。
为了展示多张图片，简单的用 JS 做了图片切换处理。当然，这个图片切换其实也是可以用 CSS 来实现，这个之前写过相关的文章《调戏锚点与 :target 选择符》，有兴趣的可以去看一下。
回到主题，这个纯 CSS 实现的黑白彩色对比图最终效果是这样的。GIF 图加载可能有点慢。
思路
对于这个效果，如果是要用 CSS 来实现，关键主要是两个点：
- 灰色图片的展示；
- 可拖动的一个容器；
只要实现了这两个功能点，其他的基本上就是美化修饰了。
思路拆解
灰色图片的展示，说白了就是滤镜 filter 的使用，所以，只要对需要展示黑色图片的容器使用 filter: grayscale(100%); 就可以了。如果你愿意的话，也可以使用其他滤镜来玩一下。
然后就是可拖动的容器实现方式了。细心的朋友应该知道，多文本输入框