Question

我有一个多次使用相同图标的html页面，所以我在css中将该图标作为背景图像嵌入。

在css中，图标的类是这样的：

.user {
background-image: url(data:image/png;base64,...encoded png file...);
background-position: 0 0;
background-repeat: no-repeat;
width: 16px;
height: 16px;
}

到目前为止，我使用<span class='user'></span>标签显示图标，非常好。

我希望图标成为另一个页面的链接，但是当我这样做时，我无法使图标看起来正确。

我试过了：

<a href="www.google.com"><img class="user" src=""></img></a>

但是这会在资源管理器中显示一个断开的链接图标，看起来不错，但在Chrome中有一个边框。这显然是错误的。

我也尝试过：

<a href="www.google.com"><span class="user"></span></a>

这样可行，但是当图标上方时，鼠标光标不会变为指针。

我该怎么办？

Answer 1

您应该使元素块级别（至少inline-block）设置宽度/高度并显式设置cursor。这两件事是关键因素。

.user {
    background-image: url(data:image/png;base64,...encoded png file...);
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block; /* set display so you can set width/height */
    cursor: pointer; /* ensure it shows the link cursor */
    width: 16px;
    height: 16px;
}

HTML：

<a href="#urlhere"><span class="user"></span></a>

因此，您最终得到一个显示图像的inline-block元素，然后用锚点将其包裹起来。这基本上与围绕<img />包裹锚点相同。

或者，您可以仅使用<a>执行此操作。您可以使用与此HTML完全相同的CSS：

<a href="#urlhere" class="user"></a>

两者都应该实现你所追求的目标。这两种选择之间的区别主要是语义。

Answer 2

您可以在锚标记上设置class属性。

<a href="#" class="user"></a>

Answer 3

尝试在你的css上添加这个

  cursor:pointer;/*Link with poniter*/

<a href="www.google.com"><span class="user" /></span></a>

Answer 4

您是否正在寻找THIS

之类的内容

HTML：

<a href="http://www.google.com" class="user"></a>

CSS：

.user {  
    text-indent: -99999px;
    background: url("http://www.google.co.in/images/srpr/logo4w.png") no-repeat top left;
    float: left;   
    overflow: hidden;
    width: 600px;
    height: 200px;
    margin: 10px;
}

希望这就是你所需要的。

CSS Embedded Image作为链接

4 个答案: