html - 如何使用 CSS 将图像添加到 anchor 标记？

Question

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

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

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;
}

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

Answer 1

您必须添加 display:block 或 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;
}