html - 使用 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 超链接，而不必将其设为 anchor 而不是 div。

Answer 1

您使用 CSS 控制设计和样式，而不是内容的行为。

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

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

您不能嵌套 div里面<a>并且仍然有“有效”代码。 <a>是不能合法包含 block 元素的内联元素。建立链接的唯一非 Javascript 方式是使用 <a>元素。

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

如果您不想这样，您将不得不使用 JavaScript 来制作您的 <div>可点击:

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