Html 使用 CSS 超链接图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/117667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hyperlinking an image using CSS
提问by ljs
I know this is probably the dumbest question ever, however I am a total beginner when it comes to CSS; how do you hyperlink an image on a webpage using an image which is sourced from CSS? I am trying to set the title image on my website linkable to the frontpage. Thanks!
我知道这可能是有史以来最愚蠢的问题，但是当谈到 CSS 时，我是一个完全的初学者；如何使用源自 CSS 的图像超链接网页上的图像？我正在尝试将我的网站上的标题图像设置为可链接到首页。谢谢！
Edit:Just to make it clear, I'm sourcing my image from CSS, the CSS code for the header div is as follows:-
编辑：为了清楚起见，我从 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;
}
I want to know how to make this divhyperlinked on my webpage without having to make it an anchor rather than a div.
我想知道如何在我的网页上使这个div超链接，而不必使其成为锚点而不是 div。
回答by Swati
You control design and styles with CSS, not the behavior of your content.
您可以使用 CSS 来控制设计和样式，而不是内容的行为。
You're going to have to use something like <a id="header" href="[your link]">Logo</a>and then have a CSS block such as:
你将不得不使用类似的东西<a id="header" href="[your link]">Logo</a>，然后有一个 CSS 块，例如：
a#header {
background-image: url(...);
display: block;
width: ..;
height: ...;
}
You cannot nest a divinside <a>and still have 'valid' code. <a>is an inline element that cannot legally contain a block element. The only non-Javascript way to make a link is with the <a>element.
您不能嵌套div内部<a>并且仍然具有“有效”代码。<a>是不能合法包含块元素的内联元素。建立链接的唯一非 Javascript 方法是使用<a>元素。
You can nest your <a>tag inside <div>and then put your image inside :)
你可以将你的<a>标签嵌套在里面<div>，然后把你的图片放在里面:)
If you don't want that, you're going to have to use JavaScript to make your <div>clickable:
如果您不希望那样，您将不得不使用 JavaScript 来使您的<div>可点击：
Document.getElementById("header").onclick = function() {
window.location='...';
}
回答by Dave Rutledge
To link a css-sourced background-image:
链接来自 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">
The key thing here is to turn the anchor tag into a block element, so height and width work. Otherwise it's an inline element and will ignore height.
这里的关键是把锚标签变成一个块元素，这样高度和宽度就起作用了。否则它是一个内联元素，将忽略高度。
回答by John Rudy
That's really not a CSS thing. You still need your A tag to make that work. (But use CSS to make sure the image border is either removed, or designed to your required spec.)
这真的不是 CSS 的事情。你仍然需要你的 A 标签来完成这项工作。（但使用 CSS 来确保图像边框被移除，或设计为您所需的规格。）
<a href="index.html"><img src="foo" class="whatever" alt="foo alt" /></a>
EDIT: Taking original intent (updated question) into account, a new code sample is below:
编辑：考虑到原始意图（更新的问题），下面是一个新的代码示例：
<a href="index.html"><img id="header" alt="foo alt" /></a>
You're still in an HTML world for links, as described by other answers on this question.
如关于此问题的其他答案所述，您仍处于链接的 HTML 世界中。
回答by Spoilsport
sorry to spoil your fun ladies and gentlemen, it is possible.
抱歉破坏了你们有趣的女士们先生们，这是可能的。
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;
}
回答by Xian
<a href="linkto_title_page.html" class="titleLink"></a>
then in your css
然后在你的 css 中
.titleLink {
background-image: url(imageUrl);
}
回答by ctcherry
You still create links in HTML with 'a' (anchor) tags just like normal. CSS does not have anything that can specify if something is a link to somewhere or not.
您仍然可以像往常一样使用“a”（锚点）标签在 HTML 中创建链接。CSS 没有任何东西可以指定某物是否是指向某处的链接。
EditThe comments of mine and others still apply. To clarify, you can use JavaScript to make a div act as a link:
编辑我和其他人的评论仍然适用。澄清一下，您可以使用 JavaScript 将 div 用作链接：
<div id="header" onclick="window.location='http://google.com';">My Header</div>
That isn't really great for usability however as people without JavaScript enabled will be unable to click that and have it act as a link.
这对可用性来说并不是很好，但是因为没有启用 JavaScript 的人将无法单击它并将其用作链接。
Also, you may want to add a cursor: pointer;line to your CSS to give the header div the correct mouse cursor for a link.
此外，您可能希望cursor: pointer;在 CSS 中添加一行，为标题 div 提供链接的正确鼠标光标。
回答by Rich Adams
CSS is for presentation only, not content. A link is content and should be put into the HTML of the site using a standard <a href="">tag. You can then style this link (or add an image to the link) using CSS.
CSS 仅用于演示，而非内容。链接是内容，应该使用标准<a href="">标签放入网站的 HTML 中。然后，您可以使用 CSS 设置此链接的样式（或向链接添加图像）。
回答by Nathan Long
HTML is the only way to create links - it defines the structure and content of a web site.
HTML 是创建链接的唯一方法——它定义了网站的结构和内容。
CSS stands for Cascading StyleSheets - it only affects how things look.
CSS 代表级联样式表 - 它只影响事物的外观。
Although normally an <a/>; tag is the only way to create a link, you can make a <div/>clickable with JavaScript. I'd use jQuery:
虽然通常是<a/>; 标签是创建链接的唯一方法，您可以<div/>使用 JavaScript制作可点击的链接。我会使用 jQuery：
$("div#header").click(function() {window.location=XXXXXX;});
回答by roryf
You have to use an anchor element, wrapped in a container. On your homepage, your title would normally be an h1, but then on content pages it would probably change to a div. You should also always have text in the anchor element for people without CSS support and/or screen readers. The easiest way to hide that is through CSS. Here are both examples:
您必须使用包装在容器中的锚元素。在您的主页上，您的标题通常是 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>
and the CSS:
和 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;
}
Depending on the rest of your stylesheet you may need to adjus it for the h1 to make it look the same as the div, check out CSS Resets for possible solutions to this.
根据样式表的其余部分，您可能需要针对 h1 调整它以使其看起来与 div 相同，请查看 CSS 重置以获取可能的解决方案。
回答by John Dunagan
Try this - use an H1 as the seat of your graphic instead. Saved my butt time and time again:
试试这个 - 使用 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;
}
Accessible, and also solid across browsers IE6 and > . You could also link the H1.
可访问，并且跨浏览器 IE6 和 > 也很可靠。您也可以链接 H1。
