網頁動態背景,就是指網頁背景可以隨著鼠標或者頁面滾動而產生變化,這種效果可以為網頁增加一些活力,并且可以讓用戶更加喜歡你的網站。那么,如何使用 HTML 代碼實現這種動態效果呢?
body { background: url(bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } $(window).scroll(function() { var yPos = -($(window).scrollTop() / 10); var bgPos = 'center '+ yPos + 'px'; $('body').css('background-position', bgPos); });
以上代碼就是實現動態背景的代碼。首先,我們需要在 body 標簽中設置背景圖片,可以通過 CSS 屬性 background 來實現。這里使用了一個名為 bg.jpg 的圖片。接著使用 cover 屬性,讓背景圖像修改大小以填充整個屏幕,這樣可以確保我們的網頁背景始終都是完美的,無論使用何種屏幕分辨率。
接下來,我們使用 jQuery 的滾動事件函數 scroll(),通過計算滾動條的位置來使背景圖片上下移動。yPos 計算出當前滾動條的位置并除以一個數值,因此,背景圖像會以正比例向上移動。bgPos 存儲我們計算出的新位置,最后通過 CSS 樣式 background-position 來移動我們的背景位置。
這就是使用 HTML 代碼實現網頁動態背景的方式,我們只需要添加這些代碼,就可以讓我們的網站變得更加動態有趣。希望這篇文章能夠幫助你實現更加有趣的網站背景。
上一篇vue多個組件實例
下一篇html嵌入asp代碼