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 background-image：

#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世界中的链接，正如此问题的其他答案所述。

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;
        }

Answer 5

您仍然使用'a'（锚点）标记在HTML中创建链接，就像正常一样。 CSS没有任何东西可以指定是否有某个链接到某个地方。

修改我和其他人的评论仍然适用。为了澄清，您可以使用JavaScript将div作为链接：

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

对于可用性而言，这并不是很好，因为没有启用JavaScript的人将无法点击它并将其作为链接。

此外，您可能需要在CSS中添加cursor: pointer;行，以便为链接提供正确的鼠标光标。

Answer 6

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

然后在你的CSS中

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

Answer 7

CSS仅用于演示，不用于内容。链接是内容，应使用标准<a href="">标记放入网站的HTML中。然后，您可以使用CSS设置此链接的样式（或将图像添加到链接）。

Answer 8

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

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

虽然通常是<a/>; tag是创建链接的唯一方法，您可以使用JavaScript进行<div/>点击。我使用jQuery：

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

Answer 9

您必须使用包裹在容器中的锚元素。在您的主页上，您的标题通常是h1，但在内容页面上它可能会更改为div。对于没有CSS支持和/或屏幕阅读器的人，您还应该始终在anchor元素中包含文本。隐藏它的最简单方法是通过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以寻找可能的解决方案。

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和＆gt;之间也是可靠的。。您也可以链接H1。

使用CSS超链接图像

10 个答案: