你能把CSS中的<header>元素变成一个链接吗？

Question

我有一个网站，其中有一个样式为<header>的元素，它的背景图像是通过background-image属性设置的。我希望这个元素能够链接到首页。

有没有一种优雅的方法可以实现这个功能，并且保持background-image的样式？

CSS：

#header {
  background-image: url('../images/header.jpg');
  height: 144px;
  display: block;
}

- Matt Brand

---

<div ID='header' onclick="location.href='homepage.html'">您的标题</div> 您也可以查看以下链接了解详细信息： https://dev59.com/v3I-5IYBdhLWcg3wxbfv - user1376261

Answer 1

背景图片不可链接。正确的做法是使用一个带有适当 href 属性的 元素，将 background-image 应用于该元素。使用 CSS 让 元素占据所需空间。

- Nick Andriopoulos

---

@MattBrand 同时，记得将display:block;应用于锚点标签，使其成为块级元素而不是内联元素（以便它占据设置的宽度/高度空间）。 - Kyuuji

@MattBrand - 如果这个解决方案对您有用，请通过单击答案旁边的复选标记将其标记为已接受的解决方案。 - Shauna

Answer 2

你的问题涉及 <header> 元素，但 CSS 代码使用了一个类选择器 #header。从技术上讲，你可以使用 <header class=header>，但这是相当无意义的，而 #header 表明实际标记具有 <div class=header>。

就实际浏览器行为而言，<header> 元素和 <div> 元素都可以放置在 <a> 元素内。HTML 规范传统上禁止这种构造，但 HTML5 CR 允许在 <a> 内使用任何“流内容”。

如果标题只是一个图像（作为背景图像），那么在 a 元素上直接设置背景图像似乎更自然。然而，这会降低可访问性，因为没有办法为背景图像指定替代文本，因此对于屏幕阅读器和禁用图像加载的浏览器来说，将出现一个没有内容、没有链接文本的链接。因此，如果标题应该是一个链接，最好使用内容图像，例如：

<header>
<a href="./"><img src=hdr.png alt="ACME Company" border=0></a>
</header>

（然而，内容图像会强制最小页面宽度等于图像宽度。这并不总是理想的，但这是另一个故事和不同的问题。）

- Jukka K. Korpela

Answer 3

在HTML5中，锚点现在是块级元素，因此它们可以包含像h1、p和div这样的块级元素。但是，它们不应该包含header、article、nav、section等。

如果您无法访问标记或CSS，则可以使用JavaScript为标题元素分配onClick事件，但这当然需要JavaScript才能工作。

相反，您需要使用a将header的内容包装起来，并将其分配一个指向主页的href。然后，您可以使用背景图像和其他CSS样式化链接（确保将其设置为display:block）。

- Karl Tynan

---

“然而，它们并不适用于包装头部、文章、导航、部分等。” - 需要引用。 - Alohci

没有理由不可以换行，但我还没有遇到过任何这样做的开发者... - Karl Tynan

Answer 4

当我使用单独的样式表时，我会这样做。

原始的css header标签

    <div id="header">

    </div>

添加 span 使标题成为链接

    <span><a href="http://www.yourwebsitename.com/">
    <div id="header">

    </div></a></span>

- Mike B.