Html 在 CSS 背景图片中添加 URL 链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2643529/
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
Add URL link in CSS Background Image?
提问by neversaint
I have a CSS entry that looks like this:
我有一个如下所示的 CSS 条目：
.header {
background-image: url("./images/embouchure.jpg");
background-repeat: no-repeat;
height:160px;
padding-left:280px;
padding-top:50px;
width:470px;
color: #eaeaea;
border-bottom:1px solid #eaeaea;
}
How can I add the link to the the background image in that CSS?
如何将链接添加到该 CSS 中的背景图像？
The full CSS can be found hereand the html that uses is there.
回答by Rob van Groenewoud
Try wrapping the spans in an anchor tag and apply the background image to that.
尝试将跨度包装在锚标记中并将背景图像应用于该标记。
HTML:
HTML：
<div class="header">
<a href="/">
<span class="header-title">My gray sea design</span><br />
<span class="header-title-two">A beautiful design</span>
</a>
</div>
CSS:
CSS：
.header {
border-bottom:1px solid #eaeaea;
}
.header a {
display: block;
background-image: url("./images/embouchure.jpg");
background-repeat: no-repeat;
height:160px;
padding-left:280px;
padding-top:50px;
width:470px;
color: #eaeaea;
}
回答by Simeon
Using only CSS it is not possible at all to add links :) It is not possible to link a background-image, nor a part of it, using HTML/CSS. However, it can be staged using this method:
仅使用 CSS 根本不可能添加链接:) 使用 HTML/CSS 无法链接背景图像，也无法链接背景图像的一部分。但是，它可以使用此方法进行暂存：
<div class="wrapWithBackgroundImage">
<a href="#" class="invisibleLink"></a>
</div>
.wrapWithBackgroundImage {
background-image: url(...);
}
.invisibleLink {
display: block;
left: 55px; top: 55px;
position: absolute;
height: 55px width: 55px;
}
回答by Sarfraz
You can not add links from CSS, you will have to do so from the HTML code explicitly. For example, something like this:
您不能从 CSS 添加链接，您必须从 HTML 代码中明确添加。例如，这样的事情：
<a href="whatever.html"><li id="header"></li></a>
