标准按钮的CSS和精灵

我想在一个网站上使用一组标准的按钮，不管其中写了什么（即提交、支付、转到、拼写正确），但由于某种原因，我无法显示精灵图像。我的代码如下： HTML:

关于如何使其显示在顶部文本的任何建议（在这种情况下，它将有一个带有“test”字样的按钮）

提前感谢。

在CSS中：

用于为类名添加前缀

#

用于为ID添加前缀

您的元素是一个

DIV

，您在CSS中指定了一个

SPAN

，这两个元素都混在一起了

将是：

#iconic {
    ...
}

---

你可能想考虑一下，这对你来说处理了很多。

< P>根据你发布的CSS，你试图用一个“图标”类来操纵一个跨度内的链接……这与HTML中的：

不起作用。 要让你走上正轨，请尝试 更换所有的

span.图标

带有

#标志性span

's

---

#图标span a

翻译为“a

中的所有

，在id为“图标”的任何元素中”

Doh…我当时就是这样做的，当时正在测试，发布时忘了设置。我已经根据这两个建议清理了代码，但图像没有显示出来。@user2909044检查您的图像地址…我用您的代码创建了一个，所有东西看起来都很漂亮。我不得不使用自己的图像，虽然如此，我的CSS是在一个单独的文件夹中新代码：

CSS:
图标span a:link#图标span a:vised{display:block；background image:url（'images/an_nav_btn.jpg'）；宽度：150px；高度：45px；}图标span a:hover{background position:0-50px；}图标span a:active{background position:0-100px；
}HTML:
将精灵按钮放在此处抱歉，由于某些原因，我无法正确格式化代码。

    span.iconic a:link
    span.iconic a:visited
    {
    display: block;
background-image:url('images/an_nav_btn.jpg');
width: 150px;
height: 45px;
    }
    span.iconic a:hover
    {
background-position: 0 -50px;
}
    span.iconica a:active
    {
background-position: 0 -100px;
}

#iconic {
    ...
}