PC与移动端Hero区块背景图片差异化配置求助

要给不同设备设置差异化的背景图片，CSS媒体查询是最直接的方案（picture标签仅适用于<img>这类替换元素，没法直接控制CSS背景图）。下面是具体实现步骤：

1. 重构HTML代码 #

先移除内联style属性，改用类名控制样式，提升可维护性：

<section class="bgimage d-flex align-items-center">
  <div class="container">
    <div class="row">
      <div class="col text-center">
        <h1 class="bgimage_title text-white">Rendelés menete</h1>
        <!--<p class="bgimage_text text-white"></p>-->
      </div>
    </div>
  </div>
</section>

2. 编写响应式CSS #

通过媒体查询为桌面端、移动端分别配置背景图，同时优化显示效果：

/* 桌面端默认样式（适配≥992px设备） */
.bgimage {
  background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.5)), url(https://mikulas.web87.hu/images/site_background/7304-1.jpg);
  background-size: cover; /* 保证背景图覆盖容器且比例正常 */
  background-position: center; /* 背景图居中显示 */
  height: 500px; /* 匹配原图片高度 */
}

/* 移动端样式（适配≤991px设备） */
@media (max-width: 991px) {
  .bgimage {
    /* 替换为移动端专用背景图 */
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.5)), url(此处替换你的移动端图片地址);
    height: 300px; /* 调整高度适配小屏 */
    background-position: center top; /* 可选：优先展示图片核心区域 */
  }
}

关键说明 #

• 将背景样式从内联移到CSS后，可通过媒体查询灵活切换不同尺寸的背景图；
• background-size: cover避免背景图拉伸变形，始终覆盖容器；
• 移动端可单独调整高度和背景图位置，确保核心内容在小屏上正常展示；
• 若需更精细适配，可添加更多媒体查询断点（如针对平板、不同分辨率手机）。

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