爱站程序员基地<!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>* {padding: 0;margin: 0;}::-webkit-scrollbar {display: none;}#content {width: 100vw;height: auto;}section {height: 100vh;background: #4cbfc4;color: #fff;font-size: 20vh;display: flex;justify-content: center;align-items: center;}.img {background-size: auto;overflow: hidden;background-position: center;background-attachment: fixed;background-repeat: no-repeat;max-width: 100%;user-select: none;cursor: default;}#img1 {/*下面换成你要替换的图片*/background-image: url(./01.jpg);}#img2 {background-image: url(./02.jpg);}#img3 {background-image: url(./03.jpg);}</style><body><div><section id=\"img1\" class=\"img\">IMG1</section><section id=\"content1\">CONTENT1</section><section id=\"img2\" class=\"img\">IMG2</section><section id=\"content2\">CONTENT2</section><section id=\"img3\" class=\"img\">IMG3</section><section id=\"footer\">FOOTER</section></div></body></html>
效果预览
