如何通过css为图像添加网址？

Question

我有以下css和html：

CSS：

<style>
#sprite {
    height:30px;
    width: 40px;
    background: url(/images/forCSS/sprites.png) no-repeat;
    background-position: 0px -465px; /*152 i unit*/
    border:1px solid;
}

HTML：

<div id="sprite">
</div>

在此div中显示图像。

如何在此图片中添加网址？

谢谢！

Answer 1

你是说这个吗？

<a href="url">
   <div id="sprite"></div>
</a>

#sprite {
    height:30px;
    width: 40px;
    background: url(/images/forCSS/sprites.png) no-repeat;
    background-position: 0px -465px; 
    border:1px solid;
    float:right; /* add this */
}

或者你可以这样做：

$('#sprite').click(function(){
  window.location = url;
});

Answer 2

如果您要求通过CSS在div上添加链接，据我所知，这是不可能的。您可以选择以下选项：

HTML：

将div包裹在<a>

中

<a href="https://www.google.com/"><div></div></a>

CSS：

div {
    background: url(https://www.google.com/images/srpr/logo11w.png) no-repeat;
    width: 570px;
    height:150px;
}

DEMO HERE

---

或者我们可以将<a>放在div内，并设置其height和width + display: block;。这是一个更好的选择，并且具有有效的语法。上面的那个可以工作，但是更多或者是黑客，然后是任何东西。

HTML：

<div><a href="https://www.google.com/"></a></div>

CSS：

div {
    background: url(https://www.google.com/images/srpr/logo11w.png) no-repeat;
    width: 570px;
    height:150px;
}
a {
    width: 100%;
    height: 100%;
    display: block;
}

DEMO HERE

希望这有帮助。

Answer 3

<强> CSS

#sprite {
 height:30px;
 width: 40px;
 background: url(http://omegazelda.files.wordpress.com/2008/04/orace-and-minish-sprite.png) no-repeat;
 background-position: 0px -465px; /*152 i unit*/
 border:1px solid;
}

<强> HTML

   <a href="http://www.google.com"><div id="sprite"></div></a>

DEMO

Answer 4

据我所知，您无法通过css添加网址。但是可以使用JavaScript，请参阅How to add anchor tags dynamically to a div in Javascript?

Answer 5

代码 -

<div id="sprite">
   <a href="#" class="invisibleLink"></a>
</div>

CSS -

#sprite {
height:30px;
width: 40px;
background: url(/images/forCSS/sprites.png) no-repeat;
background-position: 0px -465px; /*152 i unit*/
border:1px solid;
}
.invisibleLink{
display:block;
height: 30px;
width: 40px;
}