直接设置背景图片（最简单）
这是最直接的方法，直接通过 jQuery 修改 <body> 元素的 CSS background-image 属性。
（图片来源网络，侵删）
核心代码
// 选择 body 元素，并设置其 CSS 样式
$("body").css({
"background-image": "url('path/to/your/image.jpg')",
// 可选：设置其他背景样式，让图片更好地展示
"background-size": "cover", // 图片覆盖整个区域，可能会被裁剪
"background-position": "center center", // 图片居中
"background-repeat": "no-repeat", // 图片不重复
"background-attachment": "fixed" // 背景固定，滚动时不动
});
完整示例
假设你的图片和 HTML 文件在同一个目录下。
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">jQuery 背景图片示例</title>
<style>
/* 为了演示，给 body 一些基本样式 */
body {
margin: 0;
font-family: Arial, sans-serif;
color: white;
/* 设置一个足够高的页面，以便测试滚动效果 */
height: 200vh;
text-align: center;
padding-top: 50px;
}
h1 {
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 10px;
display: inline-block;
}
</style>
<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>这是一个标题</h1>
<p>向下滚动，测试背景是否固定。</p>
<script>
// 当整个文档加载完成后执行
$(document).ready(function(){
// 使用 jQuery 设置背景
$("body").css({
"background-image": "url('your-background-image.jpg')",
"background-size": "cover",
"background-position": "center",
"background-repeat": "no-repeat",
"background-attachment": "fixed"
});
});
</script>
</body>
</html>
动态加载图片（更灵活）
这种方法适用于你想通过用户交互（如点击按钮）来切换背景图片,或者图片路径是动态获取的。
核心代码
// 定义一个图片路径数组
const images = [
'images/slide1.jpg',
'images/slide2.jpg',
'images/slide3.jpg'
];
// 随机选择一张图片
const randomImage = images[Math.floor(Math.random() * images.length)];
// 设置为背景
$("body").css("background-image", "url('" + randomImage + "')");
完整示例（带按钮切换）
index.html
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">动态切换背景</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
color: white;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
transition: background-image 1s ease-in-out; /* 添加切换动画 */
}
.content {
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
padding: 30px;
border-radius: 15px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
background-color: #007bff;
color: white;
border-radius: 5px;
margin-top: 15px;
}
button:hover {
background-color: #0056b3;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="content">
<h1>点击按钮切换背景</h1>
<button id="changeBgBtn">更换背景</button>
</div>
<script>
$(document).ready(function(){
// 图片路径数组
const images = [
'https://picsum.photos/seed/bg1/1920/1080.jpg',
'https://picsum.photos/seed/bg2/1920/1080.jpg',
'https://picsum.photos/seed/bg3/1920/1080.jpg'
];
// 为按钮添加点击事件
$("#changeBgBtn").on("click", function(){
// 随机选择一张图片
const randomImage = images[Math.floor(Math.random() * images.length)];
// 设置为背景
$("body").css("background-image", "url('" + randomImage + "')");
});
});
</script>
</body>
</html>
使用背景图片预加载（优化用户体验）
如果背景图片很大，直接设置可能会导致页面短暂空白，预加载可以在后台提前加载图片，设置时就能立即显示,提升用户体验。
核心思路
- 创建一个
<img>标签,但将其隐藏。 - 设置该
<img>的src为你的背景图片。 - 监听该
<img>的load事件，当图片加载完成后，再用 jQuery 将其设置为背景。
完整示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">预加载背景图片</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
color: white;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #333; /* 初始背景色 */
}
#loadingText {
font-size: 24px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="loadingText">正在加载背景图片...</div>
<script>
$(document).ready(function(){
const imageUrl = 'https://picsum.photos/seed/preload/1920/1080.jpg';
// 1. 创建一个隐藏的图片对象
const bgImage = new Image();
// 2. 设置图片源
bgImage.src = imageUrl;
// 3. 监听图片加载完成事件
$(bgImage).on('load', function(){
// 图片加载完成后，设置 body 的背景
$("body").css({
"background-image": "url('" + imageUrl + "')",
"background-size": "cover",
"background-position": "center",
"background-attachment": "fixed",
"transition": "background-image 0.5s ease-in-out" /* 平滑过渡 */
});
// 隐藏加载提示
$("#loadingText").hide();
});
});
</script>
</body>
</html>
重要提示：CSS background-size 的选择
在设置背景图片时，background-size 属性非常重要,它决定了图片如何适应屏幕。
cover: （推荐） 将图片缩放以覆盖整个背景区域，如果图片的宽高比与窗口不同，图片的某些部分可能会被裁剪，这是最常用的设置,能确保背景总是充满屏幕。contain: 将图片缩放至其宽高比能完全适应背景区域，如果图片的宽高比与窗口不同，背景的某些区域可能会留白（未被图片覆盖）。100% 100%: 将图片拉伸至完全填满背景，这会破坏图片的原始宽高比，导致图片变形（拉伸或压缩）。
| 方法 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| 直接设置 | 简单、静态的背景设置 | 代码简单，直接 | 不够灵活，无法处理动态路径 |
| 动态加载 | 需要交互切换背景的场景 | 灵活性高，响应用户操作 | 需要额外的事件处理逻辑 |
| 预加载 | 背景图片较大时 | 用户体验好，避免闪烁 | 代码稍复杂，需要额外步骤 |
对于大多数情况，方法一已经足够，如果你需要更丰富的交互，方法二是更好的选择，如果你对性能和用户体验有较高要求，方法三是最佳实践。
