0

我有一个 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>

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

我应该做什么？

4

4 回答 4

4

您应该使元素块级别（至少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>. 您将使用完全相同的 CSS 和以下 HTML：

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

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

于 2013-06-20T05:45:09.097 回答
0

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

<a href="#" class="user"></a>
于 2013-06-20T05:47:18.010 回答
0

尝试在你的 CSS 中添加这个

  cursor:pointer;/*Link with poniter*/

<a href="www.google.com"><span class="user" /></span></a>
于 2013-06-20T05:47:25.150 回答
0

你在找这样的东西吗

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

希望这是你需要的。

于 2013-06-20T05:48:42.243 回答