0

在 Firefox 中显示背景图像时遇到了一些问题，我成功了，但对 CSS 变得如此臃肿感到惊讶。现在效果很好，但我需要为多个图像复制基本 CSS 代码。

谁能告诉我是否可以优化 CSS 类并最小化代码量。我无法使用已经使用的 id，并且 class='imga p0' 不起作用（其中 p0 仅保存背景位置，成为每个图像位置的 p1、p2、p3 ..）。

提前感谢您的任何建议。

a.imga0 {background:url(../images/sprite.png) no-repeat;background-color:transparent;
  display:block;width:24px;height:24px;background-position:-288px 0;} /* tick green */
a.imga1 {background:url(../images/sprite.png) no-repeat;background-color:transparent;
  display:block;width:24px;height:24px;background-position:-312px 0;} /* cross grey */
a.imga2 { .....  and so on.
4

2 回答 2

1

编辑：所以这应该消除重复

/* template */
a.imag0, a.imag1, a.imag2 {
    display: block;
    width: 24px;
    height: 24px;
    background:url(../images/sprite.png) no-repeat;background-color:transparent;
}

/* specifications */
a.imag0 {
    background-position:-288px 0;
}
a.imag1 {
    background-position:-312px 0;
}

对于一个你可以创建一个通用选择器

a {
    background:url(../images/sprite.png) no-repeat;background-color:transparent;
    display: block;
}

这将应用一般样式，例如精灵图像。

您还可以创建一个单独的类（用空格指定更多类）

例如，你可以有

<a class="imag0 spriteclass">something</a>
<a class="imag1 spriteclass">something</a>
<a class="imag2 spriteclass">something</a>

和

a.spriteclass {
    //again the template, such as the sprite and display type and width
}

您的第二个选项是列出您希望 css 应用到的选择器，

a.imag0, a.imag1, a.imag2... {
    // your general css
}

然后像上面一样分别指定具体的精灵位置和细节

于 2012-05-02T03:38:48.110 回答
0

添加这个以防万一有人稍后引用这篇文章。

您可以使用以下工具生成最优化的 CSS。 http://www.spritecss.com/

于 2017-03-23T05:18:28.733 回答