將封面圖片從url更改為按鈕中保存的媒體圖片

請問，我該怎么做才能從按鈕中的影像更改源？我實際上是從可以訪問 API 的外部網站收到它們的，但我已將它們保存在我的 WordPress 上，并希望將它們與命令“img src”和“alt”一起使用，但是當我嘗試時（在例如，對于美式足球）我沒有得到該元素的任何影像，并且它沒有像其他按鈕一樣顯示按鈕。

<style>

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

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

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


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

/* Basketball */
.basketball {
  background-image: url(https://www.thesportsdb.com/images/media/league/fanart/lbk7tj1576753722.jpg);
  background-size: cover;
  color: #EFEEEE;
}

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

/* Baseball */
.baseball {
  background-image: url(https://www.thesportsdb.com/images/media/league/fanart/ewfwzm1521039743.jpg);
  background-size: cover;
  color: #EFEEEE;
}

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

/* Ice Hockey */
.icehockey {
  background-image: url(https://www.thesportsdb.com/images/media/league/fanart/typuvs1421795648.jpg);
  background-size: cover;
  color: #EFEEEE;
}

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

/* Association Football */
.associationfootball {
  background-image: url(https://www.thesportsdb.com/images/media/league/fanart/yuwxqr1422265356.jpg);
  background-size: cover;
  color: #EFEEEE;
}

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

/* Tennis */
.tennis {
  background-image: url(https://www.thesportsdb.com/images/media/league/fanart/rklwf21487677095.jpg);
  background-size: cover;
  color: #EFEEEE;
}

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

/* Racing */
.racing {
  background-image: url(https://www.thesportsdb.com/images/media/league/fanart/ztpfz31599901449.jpg);
  background-size: cover;
  color: #EFEEEE;
}

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

/* Fighting */
.fighting {
  background-image: url(https://www.thesportsdb.com/images/media/league/fanart/f6jyk21570522164.jpg);
  background-size: cover;
  color: #EFEEEE;
}

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

/* Golf */
.golf {
  background-image: url(https://www.thesportsdb.com/images/media/league/fanart/3s07o31551783426.jpg);
  background-size: cover;
  color: #EFEEEE;
}

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

</style>

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

<center>
<a href="www.google.com"> <img src="vxznfu1625496417.jpg
" alt="American Football"><button class="btn">AMERICAN FOOTBALL</button></a> 
<a href=""> <button class="btn basketball">BASKETBALL</button></a> 
<a href=""> <button class="btn baseball">BASEBALL</button></a> 
<a href=""> <button class="btn icehockey">ICE HOCKEY</button></a> 
<a href=""> <button class="btn associationfootball">ASSOCIATION FOOTBALL</button></a>
<a href=""> <button class="btn tennis">TENNIS</button></a> 
<a href=""> <button class="btn racing">RACING</button></a> 
<a href=""> <button class="btn fighting">FIGHTING</button></a> 
<a href=""> <button class="btn golf">GOLF</button></a> 
</center>

這是否可以將來自“背景影像：url（

uj5u.com熱心網友回復：

因此，據我所知，您希望通過按鈕使用保存在計算機上的已保存影像。

你可以做的是：

在您的檔案中創建一個名為“img”的檔案夾，將您的影像放在該地圖中并將其與 HTML 鏈接（在這里）

<button ><img src="/img/name.jpg" alt="將封面圖片從 url 更改為按鈕中保存的媒體圖片"> FOOTBALL </button>

然后由您決定如何按照您希望將影像放置在您的網站上的方式來修復您的 CSS。

如果我誤解了你的問題，請糾正我。

標籤：htmlcssWordPress按钮背景图片

上一篇：單擊時選擇和取消選擇（其他）按鈕

下一篇：多個單選按鈕組，檢查“已選中”是否已更改