如何点击页面中的图片将其设置为页面背景图？

直接上可运行的完整代码，每部分逻辑给你讲清楚：

1. HTML结构 #

先在页面里放你要选的图片，给它们统一类名方便批量获取，比如bg-option：

<body>
  <div class="image-container">
    <img src="图片1的地址" alt="背景选项1" class="bg-option">
    <img src="图片2的地址" alt="背景选项2" class="bg-option">
    <img src="图片3的地址" alt="背景选项3" class="bg-option">
  </div>
</body>

2. 基础CSS（优化布局与显示） #

给图片加些样式避免太挤，同时给body设置默认背景属性，保证切换后显示正常：

body {
  margin: 0;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 可选：加过渡让背景切换更平滑 */
  transition: background-image 0.3s ease;
}

.image-container {
  padding: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.bg-option {
  width: 150px;
  height: 100px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.bg-option:hover {
  border-color: #333;
}

3. JavaScript核心逻辑 #

不用提前定义数组，直接给所有目标图片绑定点击事件，点击时取当前图片地址赋值给body背景：

// 获取所有带bg-option类的图片
const bgImages = document.querySelectorAll('.bg-option');

// 遍历每个图片，添加点击事件
bgImages.forEach(img => {
  img.addEventListener('click', function() {
    // 获取当前点击图片的地址
    const bgUrl = this.src;
    // 设置body的背景图
    document.body.style.backgroundImage = `url(${bgUrl})`;
  });
});

额外补充（如果非要用图片数组） #

要是你需要通过数组管理图片地址（比如动态添加选项），可以这么写：

// 提前定义图片地址数组
const bgUrls = [
  '图片1地址',
  '图片2地址',
  '图片3地址'
];

// 动态生成图片元素（也可以手动写HTML）
const container = document.querySelector('.image-container');
bgUrls.forEach(url => {
  const img = document.createElement('img');
  img.src = url;
  img.className = 'bg-option';
  img.alt = '背景选项';
  container.appendChild(img);
});

// 后续点击事件逻辑和前面完全一致
const bgImages = document.querySelectorAll('.bg-option');
bgImages.forEach(img => {
  img.addEventListener('click', function() {
    document.body.style.backgroundImage = `url(${this.src})`;
  });
});

内容的提问来源于stack exchange，提问作者user22607169