Как объявить ссылку без какого-либо контента?

Question

Я хочу объявить ссылку без какого-либо контента, вместо этого я хочу использовать для нее фоновое изображение. Но я вижу фон, только когда помещаю что-то между тегами <a></a>. Как я могу решить это?

Answer 1

Сделать ссылку элементом уровня блока и присвоить ей ширину и высоту:

a.somelink {
    display: block;
    width: 100px;
    height: 20px;
    background-image: url(someimage.png)
}

Или просто используйте <img /> внутри <a> вместо background-image.

Answer 2

Лучшая практика и SEO дружественный CSS Замена текста с изображениями:

http://css -tricks.com / CSS-изображения замены /

Answer 3

Ссылка всегда должна иметь текст, будь то прямой текст или тег alt изображения. Вы можете использовать отрицательный стиль text-indent, чтобы скрыть текст от просмотра, заменив его изображением. Пример:

<a href="page.html" id="important-link">check out my important stuff</a>

#important-link {
    background: transparent url(../images/important-stuff.png) no-repeat top left;
    display: block; /* needed as <a> tag is inline by default */
    height: 100px; /* whatever image width is */
    text-indent: -9999px; /* moves the text off the screen */
    width: 100px; /* whatever image height is */
}

Это распространенный метод замены изображений, когда необходимы определенные шрифты, при этом сохраняя доступность (в основном, CSS + отсутствие изображений - единственное предостережение) и преимущества SEO для текста.

Answer 4

Что по этому поводу:

<a href="#>&nbsp;</a>

затем удалите возможное подчеркивание со следующим css:

a.somelink {
    display: block;
    text-decoration:none;
    background-image: url(someimage.png)
}

Answer 5

Чтобы использовать фоновое изображение, присвойте ему стиль display: block; или display: inline-block; в зависимости от того, что вам нужно.

Пример HTML:

<a href="#" class="ImgLink"></a>

CSS:

a.ImgLink {
  display: block; 
  background: #FFFFFF url(img.jpg); 
  width: 200px; 
  height: 100px;
}
/* Add a hover if you want */
a.ImgLink:hover {
  background: #FFFFFF url(imgHover.jpg); 
}