在网页开发中，实现背景图片跟随鼠标移动的效果可以大幅提升页面的互动性和趣味性，这种效果常被用于个人主页、产品展示页等场景。核心原理是通过监听鼠标的移动事件，获取鼠标在页面中的坐标位置，再动态调整背景图片的定位偏移量，让背景图片的移动轨迹和鼠标移动轨迹产生关联。整个过程不需要依赖复杂的第三方库，仅使用原生的HTML、CSS和JavaScript就能完成实现，下面详细介绍具体的实现步骤和代码逻辑。
实现原理说明
整个效果的实现分为三个部分，首先是HTML结构的定义，需要有一个承载背景的容器元素；其次是CSS样式的设置，为背景容器设置初始的背景图片和相关样式；最后是JavaScript逻辑，监听鼠标移动事件，计算鼠标位置对应的背景偏移值，再动态更新背景的定位属性。
背景图片的偏移计算通常采用线性映射的方式，也就是将鼠标的X坐标和Y坐标映射到背景图片的X轴偏移和Y轴偏移范围，鼠标移动幅度越大，背景图片的偏移幅度也越大，形成跟随的视觉效果。
完整实现代码
HTML结构
HTML部分只需要一个div容器作为背景的承载元素，后续通过CSS为该容器设置背景图片。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片跟随鼠标</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 背景容器 -->
<div class="bg-container"></div>
<!-- 页面其他内容可以放在这里 -->
<div class="content">
<h1>背景图片跟随鼠标互动效果</h1>
<p>移动鼠标查看背景图片的跟随效果</p>
</div>
<script src="script.js"></script>
</body>
</html>
CSS样式
CSS部分需要设置背景容器的大小铺满整个视口，同时设置背景图片的初始属性，确保背景图片可以正确显示，并且设置内容区域的层级，避免被背景遮挡。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* 防止页面出现滚动条，保证鼠标坐标计算准确 */
overflow: hidden;
height: 100vh;
font-family: Arial, sans-serif;
}
.bg-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 替换为你的背景图片地址，这里使用示例地址已按要求替换 */
background-image: url('https://ipipp.com/bg.jpg');
/* 背景图片尺寸，cover保证铺满容器，可能超出部分会被裁剪 */
background-size: 120% 120%;
/* 初始背景定位，居中显示 */
background-position: center center;
/* 过渡效果让移动更平滑 */
transition: background-position 0.1s ease-out;
z-index: -1;
}
.content {
position: relative;
z-index: 1;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
JavaScript逻辑
JavaScript部分核心是监听mousemove事件，获取鼠标的当前坐标，计算对应的背景偏移值，然后更新背景容器的backgroundPosition属性。
// 获取背景容器元素
const bgContainer = document.querySelector('.bg-container');
// 监听整个页面的鼠标移动事件
document.addEventListener('mousemove', (e) => {
// 获取鼠标在页面中的X坐标，范围是0到页面宽度
const mouseX = e.clientX;
// 获取鼠标在页面中的Y坐标，范围是0到页面高度
const mouseY = e.clientY;
// 获取当前页面的宽度和高度
const pageWidth = document.documentElement.clientWidth;
const pageHeight = document.documentElement.clientHeight;
// 计算背景X轴偏移：将鼠标X坐标映射到-10%到10%的偏移范围
// 鼠标在最左时偏移-10%，最右时偏移10%，中间对应线性变化
const offsetX = ((mouseX / pageWidth) * 20 - 10) + '%';
// 计算背景Y轴偏移：将鼠标Y坐标映射到-10%到10%的偏移范围
const offsetY = ((mouseY / pageHeight) * 20 - 10) + '%';
// 更新背景图片的定位
bgContainer.style.backgroundPosition = `${offsetX} ${offsetY}`;
});
参数调整说明
如果需要调整背景跟随的灵敏度，可以修改偏移范围的计算参数。比如将20和10的数值调大，背景图片的偏移幅度会更大，跟随效果更明显；调小则偏移幅度更小，效果更平缓。另外background-size的数值也可以调整，数值越大背景图片的原始尺寸越大，偏移时的可见区域变化更明显。
如果需要在移动端实现类似效果，可以将mousemove事件替换为touchmove事件，获取触摸点的坐标来实现适配，同时需要处理触摸事件的默认行为避免页面滚动。
HTMLJavaScriptCSS_background鼠标事件修改时间：2026-06-21 06:09:15