Html 如何在div的背景图像上获取锚标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15936719/
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
How to get anchor tag on background image of div?
提问by elroyz
HTML:
HTML：
<div id="facey">
<a href="http://www.facebook.com.au"></a>
</div>
css:
css：
#facey {
float: left;
width: 32px;
height: 32px;
background: url(file:///C|/Users/User/Documents/TAFE%20-%20Web/ICAWEB411A%20Design%20simple%20web%20page%20layouts/testing%20color/icons/facey%20sprite.png) no-repeat 0 0;
}
#facey:hover {
background-position: 0 -32px;
}
I have a css sprite for social media icons and I've been trying to put an anchor tag on them to go to there respective websites and I'm not sure how it works because the sprite images are used as background images and the anchor tag doesn't seem to work for me inside the div? I'm not to sure what im doing wrong here?
我有一个用于社交媒体图标的 css sprite，我一直在尝试在它们上放置一个锚标签以访问相应的网站，但我不确定它是如何工作的，因为 sprite 图像用作背景图像和锚标签在 div 中似乎对我不起作用？我不确定我在这里做错了什么？
回答by Vucko
Add CSSstyle display:block;to #facey a.
将CSS样式添加display:block;到#facey a.
回答by Richard
Put the background on the anchor and not on the div, it is the anchor tag that is clickable in the end. The div is actually completely redundant here.
将背景放在锚点上而不是放在 div 上，最终可点击的是锚点标签。div 在这里实际上是完全多余的。
<a href="http://www.facebook.com.au" id="facey"></a>
a#facey {
float: left;
width:32px;
height: 32px;
display: block;
background:url(file:///C|/Users/User/Documents/TAFE%20-%20Web/ICAWEB411A%20Design%20simple%20web%20page%20layouts/testing%20color/icons/facey%20sprite.png) no-repeat 0 0;
}
a#facey:hover {
background-position:0 -32px;
}
回答by cimmanon
You can't reference files from the file system like that, it is considered a security vulnerability in any browser other than IE. Try using relative paths instead:
你不能像那样从文件系统中引用文件，它被认为是除 IE 之外的任何浏览器中的安全漏洞。尝试使用相对路径：
#facey {
float: left;
width:32px;
height: 32px;
background:url(icons/facey%20sprite.png) no-repeat 0 0;
}
