多页面同位置图片统一设置唯一div ID为heroimage的CSS实现方案

核心思路是抽离重复的公共样式，仅针对不同的背景图做差异化配置，具体实现可以选以下两种常用方案：

方案1：全局CSS统一管控（推荐中大型项目使用） #

• 第一步：把所有重复的CSS属性抽离到统一的#heroimage选择器下，公共样式只需要写1次：

#heroimage {
  height: 200px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

• 第二步：给三个页面的<body>标签分别添加唯一的类名，比如首页加page-resort、第二页加page-hotel、第三页加page-casa
• 第三步：给不同页面的heroimage单独配置背景图，只需要写差异化的属性即可：

.page-resort #heroimage {
  background-image: url(resort.jpg);
}
.page-hotel #heroimage {
  background-image: url(hotel.jpg);
}
.page-casa #heroimage {
  background-image: url(casa.jpg);
}

这个方案的优势是后续如果要调整heroimage的高度、背景尺寸等公共属性，只需要修改一次公共样式即可全局生效，维护成本更低。

方案2：行内样式差异化配置（推荐小型项目快速实现） #

公共CSS部分和方案1一致，不需要给body加类名，直接在每个页面的heroimage div上通过行内样式单独指定背景图即可：

<!-- 首页的写法 -->
<div id="heroimage" style="background-image: url(resort.jpg)"></div>

<!-- 第二页的写法 -->
<div id="heroimage" style="background-image: url(hotel.jpg)"></div>

<!-- 第三页的写法 -->
<div id="heroimage" style="background-image: url(casa.jpg)"></div>

这个方案写法更简洁，不需要额外新增CSS选择器，适合页面数量少的小型项目使用。

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