如何在HTML的section标签中设置background-image背景图片

有两种常用的实现方式，具体操作如下：

方式1：使用内联style属性直接设置 #

直接在section标签的style属性中定义background-image规则，适合临时、单个section的快速设置：

<!-- 基础设置 -->
<section style="background-image: url('./你的图片路径.png');">
  这里是section的内容
</section>

<!-- 完整优化配置，解决背景显示异常问题 -->
<section style="
  background-image: url('./你的图片路径.png');
  background-size: cover; /* 背景图自适应铺满section */
  background-repeat: no-repeat; /* 取消背景默认平铺 */
  background-position: center center; /* 背景图居中显示 */
  min-height: 400px; /* 给section设置最小高度，避免无内容时高度为0导致背景不显示 */
">
  这里是section的内容
</section>

方式2：使用CSS类统一设置 #

适合多个section复用背景样式，统一管理更方便：
首先在HTML中给目标section添加自定义类名：

<section class="custom-bg-section">
  这里是section的内容
</section>

然后在style标签或者外部CSS文件中添加样式规则：

.custom-bg-section {
  background-image: url('./你的图片路径.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 400px;
}

常见注意事项 #

• 路径规则：url里的图片路径如果是本地文件，相对路径以当前HTML文件所在位置为基准，也可以填写网络图片的完整直链
• 高度问题：如果section内部没有内容，也没有设置height、min-height或者padding，section高度会默认为0，背景图无法显示，需要手动给section设置合适的高度
• 优先级问题：内联样式的优先级高于外部CSS类，如果同时设置，内联的background-image规则会覆盖CSS类的配置

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