標籤：pre 100% script auto element padding cti sla style
<!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>
向下滾動頁面，首頁有個方框圖片顯示上方內容，給人感覺是一個長圖作為背景，中間是個透明方框，創意不錯
網易app滾動頁面圖片不動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
