<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,
minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
body{
margin:0;
padding: 0;
}
div{
margin:10px 0;
text-align: center;
}
#a{
width:100%;
height: 200px;
overflow: hidden;
position: relative;
}
#b{
position: absolute;
bottom: 0;
left: 0;
width:100%;
height:auto;
}
</style>
</head>
<body>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div id="a">
<img src="img/img1.png" id="b"/>
</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<div>=======================</div>
<script>
var b=document.getElementById("b");
window.onscroll=function(){
b.style.transform="translateY("+ window.scrollY +"px)";
}
</script>
</body>
</html>
向下滚动页面，首页有个方框图片显示上方内容，给人感觉是一个长图作为背景，中间是个透明方框，创意不错
原文：https://www.cnblogs.com/carlyin/p/9146188.html