使用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 做成超链接，而不必将它变成锚点而非

元素。

- kronoz

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> 标签嵌套在 <div> 中，然后再将图片放进去 :)

如果不想这样做，您需要使用JavaScript使您的 <div> 具有可点击性：

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

- Swati

---

从HTML5开始，您被允许（http://html5doctor.com/block-level-links-in-html-5/）将块级元素放置在`<a>`标签内部。 - Henrik

Answer 2

如何链接一个来自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">

重要的一点是将锚点标签转换为块级元素，这样高度和宽度才能起作用。否则它是内联元素，将会忽略高度。

- davebug

---

谢谢，我也遇到了同样的问题，我喜欢你澄清了主要问题，即display: block;的使用。 - Jaroslav Urban

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世界中。

- John Rudy

---

kronoz，我们知道你的意思，不需要澄清。这仍然是一个HTML问题，而不是CSS问题。如果你想要一个链接，那么使用<a>元素。这就是链接的作用。一个<div>元素不是一个链接。你可以用JavaScript模拟它，但这是一个坏主意，而且还不是CSS。 - Jim

Answer 4

抱歉打扰大家的兴致，但是这是可能的。

Write in your header: [link](http://"link here")

then in your css:

#header a[href="https://link here"] {
          display: inline-block;
          width: 75px;
          height: 75px;
          font-size: 0;
        }
        .side .md a[href="link here"] {
          background: url(%%picture here%%) no-repeat;
        }

- Spoilsport

---

如果您能说明您的回复正在执行什么操作，那将会很有帮助。 - Rohit Gupta

Answer 5

您仍然可以像平常一样使用HTML中的'a'（锚点）标签来创建链接。CSS没有任何东西可以指定某个内容是否是链接。

编辑 我的评论和其他人的评论仍然适用。为了澄清，您可以使用JavaScript使一个div充当链接：

<div id="header" onclick="window.location='http://google.com';">My Header</div>

这对于可用性并不是十分理想，因为没有启用JavaScript的用户将无法单击它以使其作为链接操作。

此外，您可能希望在CSS中添加一行cursor: pointer;，以为标题div提供正确的鼠标光标。

- ctcherry

Answer 6

<a href="linkto_title_page.html" class="titleLink"></a>

在你的CSS中：

.titleLink {
  background-image: url(imageUrl);
}

- Xian

Answer 7

CSS仅用于展示，而非内容。链接是内容，应使用标准的<a href="">标签将其放入网站的HTML中。然后，您可以使用CSS样式化此链接（或向链接添加图像）。

- scaryjeff

Answer 8

HTML是创建链接的唯一方式 - 它定义了网站的结构和内容。

CSS代表层叠样式表 - 它只影响事物的外观。

尽管通常情况下<a/>标签是创建链接的唯一方式，但您可以使用JavaScript使<div/>可点击。我会使用jQuery：

$("div#header").click(function() {window.location=XXXXXX;});

- Nathan Long

Answer 9

您需要使用一个包含锚点元素的容器。在主页上，您的标题通常是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重置以获取可能的解决方案。

- Rory

Answer 10

试试这个 - 使用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。

- John Dunagan