CSS作為前端開發中重要的一部分,可以為網頁提供豐富的樣式效果,今天我們來探討一下如何使用CSS實現背景圖跟隨鼠標滾動。
/*首先,設置body的背景圖片,同時設定其背景大小為cover,不重復平鋪*/ body { background: url('bg.jpg') no-repeat center center fixed; background-size: cover; } /*接下來,使用jQuery獲取鼠標滾動的距離,根據滾動距離設置背景位置*/ $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); $('body').css('background-position', 'center '+ scrollTop +'px'); });
通過以上代碼,我們實現了頁面背景圖片跟隨鼠標滾動而移動的效果,讓網頁看起來更加生動活潑。
最后再提一下,使用CSS實現背景圖跟隨鼠標滾動的效果需要注意背景圖片的大小和鼠標滾動的速度,最好做好兼容性和性能優化的工作,讓你的網頁效果更加流暢。
上一篇json怎么編寫