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

发布于 2024-10-02 20:42:41 字数 357 浏览 5 评论 0原文

我想在我的网页中使用单个图像精灵，我应该在 CSS 中的哪里声明它？
它应该在身体里还是在哪里？

示例：

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

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

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

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

谢谢

原文

I want to use a single image sprite for my web page, where should I declare this in CSS?
Should this be in the body or where?

Example:

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

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

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

I haven't tried this because I want to know first if this is possible then I will construct my sprites.

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烦人精 2024-10-09 20:42:41

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

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 中没有“全局包含”，只需在每个选择器中引用它即可。它只会被加载一次:)

You just reference the same image for each selector:

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? */
}

There is no "global include" in CSS, just reference it in each selector. It will only be loaded once :)

回复收藏 0 原文

~没有更多了~