Question

有没有办法写一个有效的标题/链接/图像？像

这样的东西

<a href="index.html"><h1 id="logo">Company name</h1></a>

（图片设置为背景，文字向左移动，因此通过css不可见）

Answer 1

类似的东西：

<h1 id="logo"><a href="index.html">Company Name</a></h1>

#logo a {
    display: block;
    width: 200px; /* width and height equal to image size */
    height: 100px;
    background: transparent url(images/logo.png) no-repeat;
    text-indent:-9999px;
}

原始标记的问题是<a>是内联元素，<h1>是块元素。内联元素不能包含块元素。

Answer 2

不，锚元素不能包含h1元素。

此外，背景图片应保留为背景 - 徽标不是背景，这是重要的信息。

<h1><a href="/"><img src="/images/logo.png" alt="Company Name"></a></h1>

请记住，虽然公司的身份可能是主页上最重要的标题，但它可能不在其他页面上 - 因此通常应降级到其他地方。

Answer 3

这是无效的HTML代码，但您可以使用带有效代码的CSS来实现您的目标：

<强> HTML

<h1 id="logo"><a href="index.html">Company name</a></h1>

<强> CSS

h1 a:link, h1 a:visited {
  display: block;
}

您可以进一步设置A元素的样式以达到您想要的效果。

Answer 4

这是有效的，我认为可以实现您所寻找的目标，即整个图像是指向主页的链接。

<a href="index.html"><img src="logo.png" id="logo" alt="Company Name" /></a>

如果你所做的只是在你的例子中包装H1标签，那么链接只能在文本周围点击。这将排除H1标签的边距。

这不需要CSS来隐藏文字，因为公司名称位于ALT属性中，由Google和屏幕阅读器读取。

另一种方式：

如果你真的需要一个图像作为背景和前景中的文本，还有另一种方法：

<body>
   <div id="header"> 
      <h1>Some Text Here</h1>
   </div>

   <div id="main-content">
       ... lots of content here ...
   </div>
 </body>

CSS：

#header { 
    height: 55px;   // The height of you image
    width: 780px;   // The width of the image
    background: url(picture.png);
    margin: 0 auto; // To keep this div centered 
}

#header h1 {
    font-family: 'Times New Roman';
    text-decoration: bold;
    margin-left: 55px;  // This makes the text come in 55px from 
                        // the left of the containing div. Adjust to suit.
    margin-top: 10px;   // Same as above.
}

如果您想经常更改文本，这是一种有用的方法。引用日期类型的东西，或者如果您的老板总是要求您调整背景图像。

有效的HTML标题

4 个答案: