如何将按钮背景图从URL改为WordPress本地img src+alt形式？

问题根源 #

你尝试将美式足球按钮的背景图改为<img>标签时，直接把<img>和<button>并列放在<a>标签内，导致布局错乱，图片无法和按钮融合，样式与其他按钮不一致。要实现<img>+alt替代background-image的效果，需要调整HTML结构并配合CSS优化。

修改方案 #

1. 统一HTML结构

将所有按钮的<img>嵌入<button>内部，保证结构一致，同时保留alt属性的语义化：

<div class="header">
  <h2><strong>SPORTS</strong></h2>
</div>

<div class="btn-group">
  <a href="www.google.com">
    <button class="btn">
      <img src="vxznfu1625496417.jpg" alt="美式足球">
      AMERICAN FOOTBALL
    </button>
  </a>
  <a href="">
    <button class="btn">
      <img src="你的WordPress篮球图片路径" alt="篮球">
      BASKETBALL
    </button>
  </a>
  <a href="">
    <button class="btn">
      <img src="你的WordPress棒球图片路径" alt="棒球">
      BASEBALL
    </button>
  </a>
  <!-- 其余按钮按此格式替换图片路径和alt文本 -->
</div>

2. 调整CSS样式

移除原各运动类的background-image属性，通过定位让<img>实现背景图效果，同时还原原交互样式：

.header {
  text-align: center;
  background: #E1AFB3;
  color: #C3414D;
  font-size: 20px;
  font-family: Montserrat;
}

.btn-group {
  text-align: center; /* 替代<center>标签，符合现代布局规范 */
}

.btn {
  position: relative;
  border: none;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
  width: 100%;
  min-height: 150px;
  margin: 0 -2px;
  color: #EFEEEE;
  padding: 0;
  overflow: hidden;
}

.btn img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 等效原background-size:cover，保持图片比例铺满按钮 */
  z-index: -1; /* 将图片置于文字下方 */
}

.btn:hover {
  background: #E1AFB3;
  color: #C3414D;
}

.btn:hover img {
  opacity: 0.5; /* hover时图片半透明，透出按钮背景色，还原原效果 */
}

@media only screen and (min-width: 600px) {
  .btn {
    width: 50%;
  }
}

关键说明 #

• 用btn-group替代<center>标签，避免过时标签的兼容性问题
• object-fit: cover保证图片不会拉伸变形，和原背景图效果一致
• 通过position和z-index让<img>成为按钮的“背景”，同时保留alt属性的可访问性优势
• 统一所有按钮结构后，美式足球按钮的样式会和其他按钮保持一致

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