html - CSS 嵌入图像作为链接

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

您应该使元素 block 级别(至少 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显示图像的元素，然后用 anchor 包裹它。这与围绕 <img /> 包裹 anchor 基本相同。 .

或者，您可以只使用 <a> 来完成此操作.您将使用与此 HTML 完全相同的 CSS:

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

两者都应该实现您所追求的目标。这两个选择之间的区别主要在于语义。