html - 如何使用 CSS 将图像添加到锚标签？

Question

我正在使用图像使锚标记看起来像一个按钮，但它在浏览器中没有显示任何内容。

到目前为止，这是我的代码...

HTML

<span>
    <a id="knapNyhed" href="file:///E:/Projekt_skolespil/hjemmeside/index.html"></a>
</span>

CSS

.knapNyhed{
    background-image: pic/knap_nyhed_layout_00.png;
    width:226px;
    heigth: 50px;
    margin: 0 2px 0 2px;
}

希望你能帮助我为什么看不到我的按钮

score 14 · Accepted Answer

您必须添加display:blockor display:inline-block，因为a标签display:inline默认设置为，并且内联元素不能有width,height或margin。

要使背景图像正常工作，您必须添加url. 请注意，此 url 与您的 css 文件相关。

#knapNyhed {
  display:block;
  background-image: url(pic/knap_nyhed_layout_00.png);
  width:226px;
  heigth: 50px;
  margin: 0 2px 0 2px;
}

score 2 · Accepted Answer

你必须用 url() 包围你的文件路径

像这样：

background-image: url('pic/knap_nyhed_layout_00.png');

score -1 · Accepted Answer

<span>
    <a id="knapNyhed" href="file:///E:/Projekt_skolespil/hjemmeside/index.html">text</a>
</span>

你需要你在 >< 之间的文字，像这样

3 回答 3