代码之家 › 专栏 › 技术社区 › Arief

在哪里声明/加载CSS的背景图像精灵以便它只加载一次?

css-sprites css

0

Arief · 技术社区 · 14 年前

我想用一个图像精灵为我的网页,我应该在哪里声明在CSS?
这应该在尸体里还是在哪里?

例子:

body
{
   background-image:url(/img/sprites.png);
}

#someDiv
{
   background-position: -10px -20px; /* can I do this? */
}

#someOtherDiv
{
   background-position: -30px -40px; /* and this? */
}

我没有试过这个,因为我想先知道这是否可能,然后我将构建我的精灵。

谢谢

1 回复 | 直到 14 年前

1

2

Kyle 14 年前

您只需为每个选择器引用相同的图像:

a.myLink
{
   background-image:  background-image:url(/img/sprites.png);
}

a.myLink:hover
{
   /*you don't need to re-define styles for hover elements, unless you want them to change*/
   background-position: -50px 0;
}

#someOtherDiv
{
   background-image:  background-image:url(/img/sprites.png);
   background-position: -130px -40px; /* and this? */
}

CSS中没有“global include”,只需在每个选择器中引用它。只加载一次:)