纯 CSS 实现的黑白、彩色拖动展示效果

今天突然看到一篇文章，说是用 JS 实现拖拉展示彩色和黑白的图片效果，就是那种图片对比的效果，大概效果就是这样的：

这个效果在很多图片处理的相关页面中会出现。不过在这里突然看到有人提到用 JS 来实现，如果只是纯粹为了展示看效果，没有其他需求的话，其实完全可以直接使用 CSS 来实现。

为了展示多张图片，简单的用 JS 做了图片切换处理。当然，这个图片切换其实也是可以用 CSS 来实现，这个之前写过相关的文章《调戏锚点与 :target 选择符》，有兴趣的可以去看一下。

回到主题，这个纯 CSS 实现的黑白彩色对比图最终效果是这样的。GIF 图加载可能有点慢。

思路

对于这个效果，如果是要用 CSS 来实现，关键主要是两个点：

• 灰色图片的展示；
• 可拖动的一个容器；

只要实现了这两个功能点，其他的基本上就是美化修饰了。

思路拆解

灰色图片的展示，说白了就是滤镜 filter 的使用，所以，只要对需要展示黑色图片的容器使用 filter: grayscale(100%); 就可以了。如果你愿意的话，也可以使用其他滤镜来玩一下。

然后就是可拖动的容器实现方式了。细心的朋友应该知道，多文本输入框 <textarea> 右下角是有一个小三角图标，代表可拖动改变大小的。

这个小三角是可以通过 CSS 的 resize 属性来设置，该属性值有横竖两个方向单独设置（horizontal、vertical），以及两个方向同时设置（both)，或者都不设置 none。那么现在我们要的是横向的，所以，需要对可拖动的元素，即含有彩色图片的容器添加 resize: horizontal;。

但是需要注意一个点，如果不是用 <textarea> 标签，而是用 <div> 的话，那么我们还需要加一个 overflow: auto;，这样才会有效。

主要的部分代码

<div class="container">
  <div id="sourceImage"></div>
  <div id="grayImage"></div>
</div>

多用了几个 <div> 标签，主要是为了层次清晰一点，强调单标签的朋友请忽略这个 HTML 结构哈。

.container {
  position: relative;
  width: 1080px;
  height: 607px;
  overflow: hidden;
  margin-bottom: 12px;
}
#sourceImage,
#grayImage {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  height: 100%;
  padding: 0;
  margin: 0;
  background: url(../blend_test_1.jpg) no-repeat 0 0;
  background-size: cover;
  z-index: 1;
}
#sourceImage {
  max-width: 100%;
  width: 60%;
  resize: horizontal;
  z-index: 3;
}

CSS 部分也很简单，关键的代码已经在上面提过了，这里所展示的代码去掉了部分“美化”的 CSS 属性，比如那个渐变的边、初次展示的动画效果。

需要额外说明一点的是，max-width: 100%; 的作用是为了方式元素在拖动的时候跑到容器外面去。

结语

哦了，基本上效果有了，关键部分代码也放出来了，如果有兴趣看具体的 demo 可以看这里：http://lab.tianyizone.com/demo/color_gray_image.html。

原文首发于个人公众号：志语自乐，原文地址：https://mp.weixin.qq.com/s/Pmc__fmIvJVZsvgH-n7Vvw