如何实现多背景选择并在另一网页展示选中背景？

要完成你需要的功能，核心是在背景选择页传递选中的图片路径，然后在设计页读取这个路径并更新显示的图片。以下是具体修改步骤：

1. 修改背景选择页（background.html） #

给每个图片的跳转链接加上查询参数，把选中的图片路径传递给设计页：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="stylebackground.css">
  <title>Choose Background</title>
</head>
<body>
  <h1>Choose Background</h1>
  <ul class="bg-list">
    <li><a href="../designpage/design.html?bg=beach.png"><img src="beach.png" alt="beach"></a></li>
    <li><a href="../designpage/design.html?bg=bedroom.png"><img src="bedroom.png" alt="bedroom"></a></li>
    <li><a href="../designpage/design.html?bg=fallcolors.png"><img src="fallcolors.png" alt="fall colors"></a></li>
    <li><a href="../designpage/design.html?bg=icywaterfall.png"><img src="icywaterfall.png" alt="icy waterfall"></a></li>
    <li><a href="../designpage/design.html?bg=moonlight.png"><img src="moonlight.png" alt="moonlight"></a></li>
    <li><a href="../designpage/design.html?bg=park.png"><img src="park.png" alt="park"></a></li>
    <li><a href="../designpage/design.html?bg=purplewaterfall.png"><img src="purplewaterfall.png" alt="purple waterfall"></a></li>
    <li><a href="../designpage/design.html?bg=smalltown.png"><img src="smalltown.png" alt="small town"></a></li>
    <li><a href="../designpage/design.html?bg=stable.png"><img src="stable.png" alt="stable"></a></li>
    <li><a href="../designpage/design.html?bg=sunrise.png"><img src="sunrise.png" alt="sunrise"></a></li>
    <li><a href="../designpage/design.html?bg=sunsetbeach.png"><img src="sunsetbeach.png" alt="sunset beach"></a></li>
    <li><a href="../designpage/design.html?bg=texturedroom.png"><img src="texturedroom.png" alt="textured room"></a></li>
  </ul>
</body>
</html>

2. 背景选择页样式（stylebackground.css） #

让图片列表可垂直滚动，排版更整齐：

body {
  margin: 0;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
}

.bg-list {
  list-style: none;
  padding: 0;
  max-height: 80vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.bg-list li img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.2s;
}

.bg-list li img:hover {
  transform: scale(1.05);
}

3. 修改设计页（design.html） #

修正alt属性语法错误，添加容器让图片居中显示：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styledesign.css">
</head>
<body>
  <h1 id="header">Design Mode</h1>
  <div class="bg-preview">
    <img src="./imagesdesign/purplewaterfall.png" alt="A purple waterfall" id="waterfall">
  </div>
  <ul id="rightlist">
    <li id="backgroundli"><a href="../backgroundpage/background.html" target="_blank">Background</a></li>
  </ul>

  <script type="text/javascript" src="scriptdesign.js"></script>
</body>
</html>

4. 设计页样式（styledesign.css） #

实现预览图片居中、按钮侧边固定：

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  min-height: 100vh;
  position: relative;
}

#header {
  text-align: center;
  padding: 20px;
}

.bg-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 120px);
}

.bg-preview img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

#rightlist {
  list-style: none;
  position: fixed;
  right: 20px;
  top: 20px;
}

#backgroundli a {
  text-decoration: none;
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border-radius: 4px;
}

#backgroundli a:hover {
  background-color: #45a049;
}

5. 设计页JavaScript（scriptdesign.js） #

读取URL参数并更新预览图片：

// 获取URL中的背景图片参数
const urlParams = new URLSearchParams(window.location.search);
const selectedBg = urlParams.get('bg');

if (selectedBg) {
  // 根据实际文件路径调整图片地址，这里假设背景图都在designpage/imagesdesign目录下
  const bgImage = document.getElementById('waterfall');
  bgImage.src = `./imagesdesign/${selectedBg}`;
  // 自动生成alt文本
  bgImage.alt = selectedBg.split('.')[0].replace(/([A-Z])/g, ' $1').trim();
}

注意事项 #

• 确保图片文件路径对应：如果背景页的图片不在designpage/imagesdesign目录，要修改JavaScript里的src拼接逻辑。
• 若不想用新窗口打开背景页，可去掉链接的target="_blank"属性，跳转后原页面会直接读取参数更新图片。

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