如何在JavaScript頁面加載中執行背景位置
[英]How do I execute background-position on a JavaScript page load
問題描述
我正在嘗試使用background-position: center center; 但是當您開始滾動並激活javascript時，它將獲得錯誤的位置。 有人有什么建議嗎？
在此處查看演示： https : //www.w3schools.com/code/tryit.asp?filename=G23Z0H5YSQCO
1 個解決方案
解決方案1
0 已采納 2019-03-14 22:18:45
嘗試使用此行以保持水平居中，並僅在滾動時更改y位置：
document.getElementById("myDiv").style.backgroundPosition = "center " + (-window.pageYOffset / speed) + "px";
因此，您的示例應如下所示：
<!DOCTYPE html> <html> <head> <style> #myDiv { background-image: url('https://dummyimage.com/1200x400/000/fff'); background-repeat: repeat; background-size:cover; background-position:center center; padding:20% 0; text-align:center; width:100%; } body {height:1400px;} </style> </head> <body> <script> document.addEventListener("DOMContentLoaded", function() { window.onscroll = function() { var speed = 8; document.getElementById("myDiv").style.backgroundPosition = "center " + (-window.pageYOffset / speed) + "px"; } }); </script> <div id="myDiv"> <h1>Headline</h1> <p>Lorem ipsum dolor sit amet</p> <button>Call to action</button> </div> </body> </html>
如何將CSS background-position屬性從百分比轉換為像素？
[英]How do I convert a CSS background-position property from percentages into pixels?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.