最近在刷些网站，想看看现在网站有没有什么新功能，突然遇到图下的图层展示：
一时之间突然来了兴致，脑袋龟速旋转，两张图层叠加一起？外层设置position:relative,内层设置两张图position:absolute,在靠个z-index叠上下层，是否可以解决，感觉成切换显示了，再查有没有相关资料，找到一篇# A “Before And After” Image Comparison Slide Control in HTML5
案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
header { position: relative;line-height: 0; }
div#comparison { width: 60vw; height: 60vw; max-width: 600px; max-height: 600px; overflow: hidden; margin: 0 auto; margin-bottom: 4rem; }
div#comparison figure { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg); background-size: cover; position: relative; font-size: 0;
width: 100%; height: 100%; margin: 0; }
div#comparison figure > img { position: relative; width: 100%; }
div#comparison figure div { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg); background-size: cover; position: absolute; width: 50%;
box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3); overflow: hidden; bottom: 0; height: 100%; }
div#comparison input[type=range]{ -webkit-appearance:none; -moz-appearance:none; position: relative; top: -2rem; left: -2%; background-color: rgba(255,255,255,0.1); width: 102%; }
div#comparison input[type=range]:focus { outline: none; }
div#comparison input[type=range]:active { outline: none; }
div#comparison input[type=range]::-moz-range-track { -moz-appearance:none; height:15px; width: 98%; background-color: rgba(255,255,255,0.1); position: relative; outline: none; }
div#comparison input[type=range]::active { border: none; outline: none; }
div#comparison input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none;
width: 20px; height: 15px; background: #fff; border-radius: 0; }
div#comparison input[type=range]::-moz-range-thumb { -moz-appearance: none;
width: 20px; height: 15px; background: #fff; border-radius: 0; }
div#comparison input[type=range]:focus::-webkit-slider-thumb { background: rgba(255,255,255,0.5); }
div#comparison input[type=range]:focus::-moz-range-thumb { background: rgba(255,255,255,0.5); }
</style>
<body>
<header>
<div id="comparison">
<figure>
<div id="divisor"></div>
</figure>
<input type="range" min="0" max="100" value="50" id="divisor-slider" oninput="moveDivisor()">
</div>
</header>
</body>
<script>
function moveDivisor() {
divisor = document.getElementById("divisor");
slider = document.getElementById("divisor-slider");
divisor.style.width = slider.value+"%";
}
window.onload = function() {
moveDivisor();
};
</script>
</html>
figure标签
标签规定独立的流内容（图像、图表、照片、代码等等）。 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。
注意事项
IE 9、Firefox、Opera、Chrome 和 Safari 支持<figure>标签。
IE 8 或更早版本的 IE 浏览器不支持 <figure> 标签。
在根据自己需求可进行修改，如果您有更好的办法，方便留言评论下哈。
