如何用单张图片生成3×3网格区块，替代多图实现点击显隐

问题背景 #

我已经实现了两层图片交互效果：下层是.main_container的背景图，上层为3×3网格布局的独立图片；点击网格项时通过jQuery将其opacity设为0，即可显示下层图片。

当前痛点是上层每个网格项需要手动切割成9张独立图片，希望改为用单张大图自动分割对应区块填充，后续修改图片无需再手动切割。

解决方案 #

核心是利用CSS的background-position属性，为每个网格项设置精准的背景定位，让单张大图的不同区域对应显示在3×3网格的每个项中，无需切割图片。

修改后的完整代码 #

CSS 代码

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.main_container {
  width: 60%;
  height: 60%;
  background-image: url("/images/cat.jpg");
  background-size: cover;
  background-position: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 0;
}

.grid-item {
  background-image: url("/images/narava2_small.jpg");
  background-size: 300% 300%; /* 原图放大3倍，适配3×3网格的区块划分 */
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 0; /* 移除内边距避免背景错位 */
  font-size: 30px;
  text-align: center;
  cursor: pointer;
}

/* 第一行网格项背景定位 */
.grid-item:nth-child(1) { background-position: 0 0; }
.grid-item:nth-child(2) { background-position: 50% 0; }
.grid-item:nth-child(3) { background-position: 100% 0; }

/* 第二行网格项背景定位 */
.grid-item:nth-child(4) { background-position: 0 50%; }
.grid-item:nth-child(5) { background-position: 50% 50%; }
.grid-item:nth-child(6) { background-position: 100% 50%; }

/* 第三行网格项背景定位 */
.grid-item:nth-child(7) { background-position: 0 100%; }
.grid-item:nth-child(8) { background-position: 50% 100%; }
.grid-item:nth-child(9) { background-position: 100% 100%; }

HTML 代码

<div class="main_container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

JavaScript 代码

let clicks = 0;

$(".grid-item").click(function() {
  clicks++;
  console.log(`clicked ${clicks} times`);
  $(this).css("opacity", 0);
});

关键说明 #

1. background-size: 300% 300%：将单张大图放大3倍，使原图的1/3宽度和高度正好匹配每个网格项的尺寸
2. background-position 定位：通过百分比精准控制每个网格项显示大图的对应区块，0%对应边缘，50%对应中间，100%对应另一边缘
3. 移除网格项内边距：避免内边距挤压背景区域导致显示错位
4. 均等网格布局：用repeat(3, 1fr)保证每行每列的网格项宽度高度完全均等，确保背景区块对齐

内容的提问来源于stack exchange，提问作者Žan Čahuk