How to get anchor tag on background image of div?

问题:

HTML:

<div id="facey">
    <a href="http://www.facebook.com.au"></a>
</div>

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?

回答1:

Add CSS style display:block; to #facey a.

回答2:

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.

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

回答3:

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:

#facey {
    float: left;
    width:32px;
    height: 32px;
    background:url(icons/facey%20sprite.png) no-repeat 0 0;
    }