2

我有一个网站，<header>它的样式是这样的，因此标题图形是background-image. 我想有到主页的标题链接。

有没有一种优雅的方法可以让我将它作为标题保留background-image？

CSS：

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

4 回答 4

6

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

于 2013-03-13T13:39:20.833 回答
1

您的问题涉及<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>

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

于 2013-03-13T14:40:05.573 回答
0

I do it like this when using a separate style sheet.

Original css header tag

    <div id="header">

    </div>

Added span to make header a link

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

    </div></a></span>
于 2014-03-05T17:21:47.107 回答
0

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

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

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

于 2013-03-13T13:47:03.383 回答