Question

我想声明一个没有任何内容的链接，而是我想使用背景图片。但是只有当我在<a></a>标签之间放置内容时，我才能看到背景。我该如何解决？

Answer 1

将链接设为块级元素，并为其指定宽度和高度：

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

或者只使用<img />内的<a>，而不是使用background-image。

Answer 2

链接应始终包含文字，无论是直接文字内容还是图片的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 3

最佳做法 SEO 友好 CSS 文字替换图片：

http://css-tricks.com/css-image-replacement/

Answer 4

要使用背景图片，请根据您的要求为其指定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); 
}

Answer 5

这个怎么样：

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

然后使用以下css删除可能的下划线：

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

如何声明没有任何内容的链接？

5 个答案: