代码之家 › 专栏 › 技术社区 › Tamas Czinege

单个图像文件,用于存储页面上的所有小图像

css-sprites css html

9

Tamas Czinege · 技术社区 · 16 年前

Stackoverflow播客 ,Jeff谈到了使用一个图像文件,该文件包含页面上所有的微小图像,然后使用CSS对其进行剪切,以便正确显示所有图像。关键是减少服务器请求的数量,以便更快地加载页面。我想“哇,太酷了,我真的可以在我们的产品中使用它”。

我的问题是: 我需要加载带有背景图像的图像,但是如何在大图像中指定子图像的偏移?也就是说,假设在(50px,50px)处的大图像中有一个锤子图标,其大小为32px*32px,我如何强制浏览器仅显示该位?

3 回复 | 直到 16 年前

1

10

M4N 16 年前

基本上,您使用单个图像作为背景图像,但将其移离(向左和向上)要显示的图像的偏移量。例如,要显示锤子图标:

.hammer
{
  background: transparent url(myIcons.jpg) -50px -50px no-repeat;
}

2

4

Community CDub 4 年前

它叫 css sprites

我基本上是游戏编程中使用的一个老把戏,你加载一个位图,其中包含你需要绘制的某个项目的所有“状态”,其优点是这样可以预加载图像,并且在你需要实际使用它时没有延迟,在css的情况下,通常通过使用图像作为元素的背景来实现,并在:hover、:active和“normal”类上应用不同的偏移量和边界。

有更多的信息在 stackoverflow Blog

这是一个不错的发电机: http://www.csssprites.com/

3

David Waters 16 年前

你知道答案。。。在这种情况下,请谷歌使用firebug之类的工具查看谷歌搜索结果页面的源代码,你会发现


.w10 
 background-position:-152px 0;
}
.w10, .w11, .w20, .w21, .w24, .wci, .wpb 
 background:transparent url(/images/nav_logo4.png) no-repeat scroll 0 0;
 border:0 none;
 cursor:pointer;
 height:16px;
 margin-left:8px;
 vertical-align:bottom;
 width:16px;
}