背景：url（），背景圖片：url（）無法正常工作

Question

我想用HTML和CSS制作圖像按鈕。 所以我嘗試了background:url()但是沒有用。 我也嘗試了這些：

1. background: url(res/play.png)
2. background: url("res/play.png")
3. background: url("/res/play.png")
4. background: url(/res/play.png)
5. background-image: url(res/play.png)

他們都沒有工作。 這是我的目錄結構。

MyProgram
└ res directory
└ style.css
└ index.html

這是我的代碼。 該圖像在res目錄中。

<table>
  <tr>
    <td>
      <button id="previousButton"></button>
      <button id="playButton"></button>
      <button id="nextButton"></button>
    </td>
    <td>
      <input type="range" id="volumeSlider" min="0" max="100" value="50" step="1">
      <button id="muteButton"></button>
    </td>
  </tr>
</table>

button#playButton {
  background: url(res/play.png);
}

Answer 1

您可以嘗試添加寬度和高度。 背景本身並不滿足，因此在您的情況下將不會顯示任何內容。

button#playButton {
  background: url('res/play.png');
  height: 100px;
  width: 150px;
}