背景：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);
}

password_verify

Answer 1

您可以尝试添加宽度和高度。 背景本身并不令人满意，因此在您的情况下什么也不会显示。

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