Question

我有问题。我雇用的设计师并没有将徽标和标题分开，而是为了让他完成这件事。

所以我有一个标题图片，里面有网站标识。我想将此徽标设为可点击。您可以在此处查看该网站：http://www.stopsweats.org/

徽标标记的代码是：

<div id="header">
<p id="logo">
<a href="http://www.stopsweats.org"></a>
</p>

这是根据评论添加的CSS

#header {
    background-image: url("http://www.stopsweats.org/wp-content/uploads
/2010/12/sweatbackground1.jpg");
    border-color: transparent;
    height: 108px;
    padding-top: 2em;
    z-index: -1;
}

那么我怎样才能把它变成一个有效的链接。？

我不想添加任何可见的文字，因为它看起来很难看。
我会将#logo宽度和高度以及展示位置更改为图像上的叠加层。完全希望在所有浏览器中都可以。

Answer 1

像这样写：的 HTML：

<div id="header"> <a href="http://www.stopsweats.org" id="logo"></a> </div>

<强> CSS：

#header { background-image: url("http://www.stopsweats.org/wp-content/uploads/2010/12/sweatbackground1.jpg"); border-color: transparent; height: 108px; z-index: -1; width:1000px; padding-top:10px; } #logo{ display:block; width:245px; height:60px; margin-left:90px; }

http://jsfiddle.net/rEFRw/

Answer 2

最简单的方法是让a占用一些空间。它已经正确定位，所以只有一点点可做。

删除这些css的宽度和高度属性：

#logo a {
    width:1px;
    height:1px;
}

然后在a添加一些文字：

<a href="http://www.stopsweats.org">StopSweats</a>

由于您text-indent: -9999px已应用a，因此不会显示该文本，但该块的宽度和高度大致为覆盖横幅图片区域。

Answer 3

Esiaest根据您的结构做的方式我更喜欢将您的徽标图像直接放入您的html而不是背景图像通过CSS。如果您愿意，只需要在您的锚标记（....）之间添加图片标记，只需根据以下代码更改您的CSS和HTML。

CSS

#header {
border-color: transparent;
height: 108px; /* change according your logo image height */
padding-top: 2em;
z-index: -1;
}

HTML

<div id="header">
    <p id="logo">
    <a href="http://www.stopsweats.org"><img src="http://www.stopsweats.org/wp-content/uploads/2010/12/sweatbackground1.jpg" alt="logo" title="go back to home" width="logo width here" height="logo height here" /></a>
    </p>
</div>

正确检查您的徽标图片网址，并确保将您的标题div标记添加到当前的html文件中。

此外，如果您的#logo id设置了宽度和高度值，则相应地更改。

Answer 4

#logo a{display:block; height:XXpx; width:XXpx; text-indent:-999px;}

您可能还需要调整其他标签的css。但它会起作用

将P标记转换为链接

4 个答案:

http://jsfiddle.net/rEFRw/