Question

我有一个网站，其<header>的样式设计为标题图形为background-image。我想有主页的标题链接。

是否有一种优雅的方法可以让我将其保留为background-image的标题？

CSS：

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

Answer 1

背景图片不可链接。解决此问题的“正确”方法是使<a>元素具有适当的href，并将background-image放入其中。使用CSS使<a>达到所需的空间。

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>

（但是，内容图像会将最小页面宽度强制为图像的宽度。这并不总是可取的，但这是一个不同的故事和不同的问题。）

Answer 3

现在，锚点是HTML5中的块元素，因此它们可以包含h1，p和div等块元素。但是，它们并不意味着包裹header，article，nav，section等。

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

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

Answer 4

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

原始css标头标记

    <div id="header">

    </div>

添加了跨度以使标题成为链接

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

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