如何让独立Gallery页面拥有与主站一致的着陆页背景样式？

问题根源 #

你当前的代码存在几个关键问题导致背景样式失效：

• CSS里的width: 98,5vw用了逗号，属于语法错误，浏览器无法正确解析
• 承载背景的<section class="landing-page-gallery">是空标签，且放在所有gallery内容之后，无法覆盖页面作为背景
• 浮动的gallery元素会导致父容器高度塌陷，同时body默认边距会让背景出现白边

修复步骤 #

1. 修正CSS语法错误：把宽度值里的逗号改成小数点，即98.5vw
2. 重构页面结构：将所有gallery内容移入landing-page-gallery容器内
3. 清除浮动并修复容器样式：给背景容器添加清除浮动的规则，同时移除body默认边距
4. 确认图片路径：确保TRICK-landing.jpg的路径和offer.html文件匹配（同级目录直接用文件名，子目录需写全路径）

修改后的完整代码 #

<html>
<head>
<style>
/* 移除body默认边距，避免背景白边 */
body {
  margin: 0;
  padding: 0;
}

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
  background-color: #f5f5f5; /* 图片加载前显示容器背景 */
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

.landing-page-gallery {
  width: 98.5vw; /* 修复逗号为小数点 */
  min-height: calc(100vh - 50px); /* 内容溢出时背景自动延伸 */
  background-image: url(TRICK-landing.jpg);
  background-position: center;
  background-size: cover;
  text-align: center;
  overflow: auto; /* 清除浮动，防止容器高度塌陷 */
  padding: 20px 0; /* 给内容添加上下内边距 */
}
</style>
</head>
<body>
<section class="landing-page-gallery">
  <div class="gallery">
    <a target="_blank" href="img_5terre.jpg">
      <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_lights.jpg">
      <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_mountains.jpg">
      <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</section>
</body>
</html>

额外说明 #

• 把height改成min-height是为了保证当gallery内容超过屏幕高度时，背景能跟着延伸，不会出现内容脱离背景的情况
• 如果主站的.landing-page还有其他样式（比如字体、颜色等），直接复制到.landing-page-gallery类里即可

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