如何像StackOverflow那样设置标签样式？

Question

我正在建立一个涉及用户评论和标签的网站。

我希望在每个问题之后实现StackOverflow的标签文本框中显示的标签。

我无法弄清楚如何在每个标记之后设置十字符号的样式，并且在文本框中具有文本背景，就像在StackOverflow上完成一样。

如何做到这一点？

Answer 1

获取Chrome，右键单击标记或其中一个边界标记，选择“检查元素”。

当我想知道如何完成整洁的CSS时，我总是这样做。它会引导你直接进入精灵图像。

Answer 2

正如@Rikudo已经展示的那样，使用包含所有必需图像的larger image，以及一些仅显示所需部分的CSS。这是用于显示每个标记的HTML：

<span class="post-tag">
    "the-tag"
    <span class="delete-tag" onmouseover="$(this).attr('class', 'delete-tag-hover')" onmouseout="$(this).attr('class', 'delete-tag')" title="remove this tag"></span>
</span>

适用于班级delete-tag的相关CSS规则：

background-image: url(img/sprites.png);
background-position: 0px -690px;
width: 14px;
height: 14px;
display: inline-block;

Answer 3

它是stackoverflow中的一个图像，实际上是精灵的一部分。他们将它用作背景图像。

Answer 4

十字架实际上只是一个角色：×