Question

我想给人的印象是，即使徽标是背景图片，徽标也是可点击的。我无法编辑HTML，因此我只能编辑CSS（这适用于在Wordpress.com上托管的博客，因此他们不允许您编辑HTML）。

当前主题有一个链接回主页的文本链接（这是我希望背景图像链接到的链接）。我使用CSS将主页的背景链接到徽标的图像。所以，现在，我在主页链接背后的背景图片显示了徽标的图像。

现在，无论如何都要隐藏文本，同时保留链接状态，这样就会产生一种幻觉：访问者可以点击徽标（即使他们真的点击了不可见的文本）？我试图在主页链接的样式中添加“text-indent：-9999px”，它正确隐藏了主页链接文本，但它没有保留链接状态。

Answer 1

徽标链接通常使用以下代码：

.link {
  display: block; /* or display: inline-block; */
  width: 200px;
  height: 100px;
  overflow: hidden;
  text-indent: -999px;
}

Answer 2

使用<area>标记可能是一个好主意，但您必须将徽标显示为<img>。

请参阅http://www.w3schools.com/TAGS/tag_area.asp以获取示例

基本上，您可以在图像中定义充当链接的区域。你甚至给它一个href值。这似乎比试图制作一些看不见的文本要好得多。

Answer 3

如果a标记内的文字包含在另一个标记（例如span标记）中，则可以这样做：

a span { visibility: hidden; }

这会在显示图像时隐藏文字。或者，我相信wordpress.com允许您为大多数主题的标题打开/关闭文本（虽然我可能在这里错了）。转到外观＆gt;标题＆gt;并查看Diaplay Text选项是否存在。

Answer 4

在你阅读下面的内容之前，我也同意昆汀的观点，即需要将它变成一个。糟糕的编程习惯试图解决这个问题：

您可以编辑锚标记所在的HTML吗？你需要在锚中嵌入另一个标签.. ex：

<a href="PATHTOHOMEPAGE"> <h1>Text Link Back to home</h1> </a>

从那里，在CSS中，您可以隐藏锚标记中的H1标记，如下所示：

a h1 {display: none;}

这只会隐藏H1内容，使锚点仍然在页面上。

但所有这些也依赖于锚是否存在于DIV元素内或标识周围特定尺寸的东西。如果是这样，您需要将锚点CSS设置为：

a {display: block; width: 100%; height: 100%;}

这使锚点成为其父元素的整个宽度和高度，该元素应该是也将徽标作为背景图像的DIV。

Answer 5

http://jsfiddle.net/JytJq/3/

HTML：

<a href="http://www.google.com" class="BG">Home</a>

CSS：

.BG {  
    text-indent: -99999px;
    background: url("http://lorempixum.com/400/200/") no-repeat top left;
    float: left;   
    overflow: hidden;

    width: 400px;
    height: 200px;
}

通过覆盖超链接使背景图像可点击？

5 个答案: