Hello World

    原理是将图片放在bg:before, 然后为 container 设置 perspective:1px 和 preserve-3d, 并蛇者 overflow:auto(要避免 x-index 则使用 overflow-y:scroll), 然后将 bg:before 向 Z 轴移动-1px, 形成前后空间

/*HTML*/
div.container
    div.bg
        h1{...}
        p{...}
/*CSS*/
.container{
  overflow-y:scroll;
  overflow-x:hidden;
  perspective:1px;
  transform-style:preserve-3d;
  color:yellow;
  text-align:center;
}
.bg{
  width: 100vw;
  height: 40vh;
  position:relative;
}
h1{
  padding:100px;
}
.bg:before{
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content:"";
  display:block;
  background: url("http://7xu8mu.com1.z0.glb.clouddn.com/katong_1.jpg");
  background-size:cover;
  z-index: -1;
  transform:translateZ(-1px) scale(2);
}