CSS Grid布局实现图片区域对齐及背景图加载问题求助

一、背景图片无法加载的原因 #

1. 选择器大小写不匹配：HTML中Maldives的id是Maldives（首字母大写），但CSS中写的是#maldives（全小写），CSS选择器区分大小写，导致样式无法生效。
2. 路径错误：你的CSS文件和HTML文件在同一目录，引用图片时使用../Images/Rectangle-5.png会向上跳转一级目录，找不到图片，应该改为Images/Rectangle-5.png。
3. 未设置元素尺寸：<p>元素默认高度由文本内容撑开，即使背景图路径正确，也会因为元素尺寸太小而看不到效果，需要为这些元素设置宽高。

二、实现目标图片布局的最优方案 #

目标布局是不规则图片网格，推荐用单Grid容器实现，比拆分多个div更简洁易维护，步骤如下：

1. 修改HTML结构 #

删除原有的三个div（theta、alpha、beta），替换为统一的Grid容器：

<section class="destination-grid">
  <div class="destination-card" style="background-image: url('Images/Rectangle-5.png')">Maldives</div>
  <div class="destination-card" style="background-image: url('Images/Rectangle-6.png')">Indonesia</div>
  <div class="destination-card" style="background-image: url('Images/Rectangle-7.png')">Srilanka</div>
  <div class="destination-card" style="background-image: url('Images/Rectangle-8.png')">North America</div>
  <div class="destination-card" style="background-image: url('Images/Rectangle-9.png')">Kashmir</div>
  <div class="destination-card" style="background-image: url('Images/Rectangle-10.png')">Bangladesh</div>
  <div class="destination-card" style="background-image: url('Images/Rectangle-11.png')">Bandarban</div>
</section>

2. 添加Grid布局CSS #

.destination-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0 120px;
  margin-bottom: 50px;
}

.destination-card {
  height: 300px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28px;
  font-weight: 800;
  position: relative;
}

/* 添加遮罩增强文字可读性 */
.destination-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.3);
  border-radius: 16px;
}

.destination-card span {
  position: relative;
  z-index: 1;
}

/* 调整卡片网格位置匹配目标布局 */
.destination-card:nth-child(4) {
  grid-column: span 2;
}

/* 响应式适配 */
@media only screen and (max-width:576px) {
  .destination-grid {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
  .destination-card:nth-child(4) {
    grid-column: span 1;
  }
}

3. 修复原有结构的临时方案（不推荐） #

如果不想重构HTML，可先修复现有问题：

/* 修正选择器大小写、路径，添加尺寸和样式 */
#Maldives {
  background-image: url(Images/Rectangle-5.png);
  background-size: cover;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28px;
  font-weight: 800;
  border-radius: 16px;
  margin: 10px;
}

#indonesia {
  background-image: url(Images/Rectangle-6.png);
  background-size: cover;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28px;
  font-weight: 800;
  border-radius: 16px;
  margin: 10px;
}
/* 其余目的地元素样式同理添加，注意id大小写匹配 */

三、额外优化建议 #

• 统一文件命名：图片文件名用小写+连字符（如rectangle-5.png），避免大小写混淆。
• 用类选择器代替id：id优先级过高，不利于样式维护，推荐用类选择器统一控制卡片样式。
• 统一容器内边距：将布局的左右内边距（如120px）抽成全局变量或统一类，保持页面风格一致。

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