使用CSS超链接图像

Question

我知道这可能是有史以来最愚蠢的问题,但是当涉及到CSS时,我是一个初学者; 如何使用源自CSS的图像在网页上超链接图像？我试图在我的网站上设置标题图像链接到首页.谢谢!

编辑:为了说清楚,我是从CSS获取我的图像,标题div的CSS代码如下: -

#header
{
    width: 1000px;
    margin: 0px auto;
    padding: 0px 15px 0px 15px;
    border: none;
    background: url(images/title.png) no-repeat bottom;
    width: 1000px;
    height: 100px;
}

我想知道如何在我的网页上建立这个div超链接,而不必使它成为锚而不是div.

Answer 1

您可以使用CSS控制设计和样式,而不是内容的行为.

你将不得不使用类似的东西<a id="header" href="[your link]">Logo</a>,然后有一个CSS块,如:

a#header {
  background-image: url(...);
  display: block;
  width: ..;
  height: ...;
}

您不能嵌套div内部<a>并且仍然具有"有效"代码.<a>是一个内联元素,不能合法地包含块元素.制作链接的唯一非Javascript方式是使用<a>元素.

你可以将你的<a>标签嵌套在里面<div>然后把你的图像放在里面:)

如果您不想这样,那么您将不得不使用JavaScript来实现<div>可点击性:

Document.getElementById("header").onclick = function() {
    window.location='...'; 
}

Answer 2

要链接css-sourced背景图像:

#header { 
display:block;

margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;    
}    

<a id="header" href="blah.html" class="linkedImage">

这里的关键是将锚标记转换为块元素,因此高度和宽度都有效.否则它是一个内联元素,将忽略高度.

Answer 3

这确实不是 CSS 的事情。您仍然需要 A 标签才能实现这一点。（但使用 CSS 来确保图像边框被删除，或根据您所需的规格进行设计。）

<a href="index.html"><img src="foo" class="whatever" alt="foo alt" /></a>

编辑：考虑到最初的意图（更新的问题），新的代码示例如下：

<a href="index.html"><img id="header" alt="foo alt" /></a>

正如此问题的其他答案所述，您仍然处于 HTML 世界中的链接中。