Как добавить изображение в тег привязки с помощью CSS?

Я делаю якорный тег похожим на кнопку, используя изображение, но оно ничего не показывает в браузере.

Это мой код до сих пор...

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

Надеюсь, вы сможете помочь, почему я не вижу свою кнопку

Ответ 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;
}

Ответ 2

Вы должны передать свой путь в файл с помощью url()

вот так:

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