使用CSS超链接图像
我知道这可能是有史以来最愚蠢的问题，但是对于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。
解决方案
那真的不是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世界中寻找链接。
我们仍然像往常一样在HTML中使用" a"(锚定)标签创建链接。 CSS没有任何东西可以指定某物是否是某处的链接。
编辑
我和其他人的评论仍然适用。为了明确起见，我们可以使用JavaScript使div充当链接：
<div id="header" onclick="window.location='http://google.com';">My Header</div>
对于可用性而言，这并不是一个很好的选择，但是由于未启用JavaScript的用户将无法单击该链接并将其用作链接。
另外，我们可能想在CSS上添加一个" cursor：pointer;"行，以使标题div为链接提供正确的鼠标光标。
我们可以使用CSS来控制设计和样式，而不是内容的行为。
我们将必须使用类似<a id="header" href="[your link]"> Logo </a>`之类的东西，然后使用CSS块，例如：
a#header {
background-image: url(...);
display: block;
width: ..;
height: ...;
}
我们不能在<a>内嵌套div并且仍然具有'valid'代码。 <a>是一个内联元素，不能合法包含block元素。建立链接的唯一非Javascript方法是使用<a>元素。
我们可以将<a>标签嵌套在<div>中，然后将图像放入:)
如果我们不想这么做，则必须使用JavaScript来使<div>可点击：
Document.getElementById("header").onclick = function() {
window.location='...';
}
CSS仅用于演示，不用于内容。链接是内容，应使用标准的<a href="">`标签将其放入网站的HTML中。然后，我们可以使用CSS设置此链接的样式(或者向该链接添加图像)。
<a href="linkto_title_page.html" class="titleLink"></a>
然后在你的CSS
.titleLink {
background-image: url(imageUrl);
}
链接css源的背景图像：
#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">
这里的关键是将锚标签变成一个块元素，因此高度和宽度就起作用了。否则，它是一个内联元素，将忽略高度。
HTML是创建链接的唯一方法，它定义了网站的结构和内容。
CSS代表级联样式表，它仅影响事物的外观。
尽管通常是一个<a/>；标签是创建链接的唯一方法，我们可以使用JavaScript使<div />`可点击。我会使用jQuery：
$("div#header").click(function() {window.location=XXXXXX;});
我们必须使用包裹在容器中的锚元素。在首页上，标题通常是h1，但是在内容页面上，标题可能会更改为div。对于没有CSS支持和/或者屏幕阅读器的用户，锚元素中还应始终包含文本。隐藏该内容的最简单方法是通过CSS。这两个例子：
<h1 id="title"><a title="Home" href="index.html>My Title</a></h1> <div id="title"><a title="Home" href="index.html>My Title</a></div>
和CSS：
#title {
position:relative; /*Makes this a containing element*/
}
#title a {
background: transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
text-indent:-9999px; /*Hides the anchor text*/
height:50px; /*Set height and width to the exact size of your image*/
width:200px;
}
根据样式表的其余部分，我们可能需要调整h1使其与div相同，请查看CSS Resets以获得可能的解决方案。
HTML5进行中的规范允许链接更多的属性，包括" div"。例如：
<div href =" http://stackoverflow.com"> .... </ div>
在HTML5被广泛采用或者出现其他情况之前，创建超文本链接的方法是通过anchor元素。
尝试使用H1作为图形的座位。一次又一次地节省了我的屁股：
<h1 class="technique-six">
CSS-Tricks
</h1>
h1.technique-six {
width: 350px;
padding: 75px 0 0 0;
height: 0;
background: url("images/header-image.jpg") no-repeat;
overflow: hidden;
}
可访问，并且在IE6和>的浏览器中也很可靠。我们也可以链接H1.
