CSS：显示图像文件中的一个特定图标答案

【问题标题】：CSS: displaying one particular icon from an image fileCSS：显示图像文件中的一个特定图标
【发布时间】：2009-09-30 05:08:12
【问题描述】：

如何设置 CSS background-image 属性以仅从较大的图像中加载一个特定图标？

例如，jQuery UI 使用以下 PNG 图像文件为其 Dialog 小部件设置主题： http://dev.jqueryui.com/browser/trunk/themes/base/images/ui-icons_2e83ff_256x240.png，其中编码了一堆图标。然后，正如http://docs.jquery.com/UI/Dialog 中演示的那样，右下角的调整大小手柄会从 PNG 加载最后一个图标。

使用 Firebug，我可以看到一堆 CSS 属性，例如 ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se 应用，它们引用 url(ui-icons.xx.png)，但没有选择特定图标。

【问题讨论】：

标签： css

【解决方案1】：

它实际上是一种 CSS sprite 技术。

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

使用

background-position

财产

如果背景图片已经指定，此属性指定其初始位置。如果只有一个值指定，假定第二个值成为“中心”。如果至少有一个值不是关键字，那么第一个值表示水平位置和第二个代表垂直位置。负和值是允许的。

例如：

body { background: url("banner.jpeg") right top }    /* 100%   0% */
body { background: url("banner.jpeg") top center }   /*  50%   0% */
body { background: url("banner.jpeg") center }       /*  50%  50% */
body { background: url("banner.jpeg") bottom }       /*  50% 100% */

背景 CSS 属性是用于设置的简写属性单个背景属性值在样式表的一个地方。背景可用于设置以下一项或多项的值：背景颜色，背景图像，背景位置，背景重复，背景附件。

.PosBG { 
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

【讨论】：

【解决方案2】：

锚元素是固定大小的，背景设置为包含所有图标的图像，但指定了 background-position 属性来移动背景图像，以便仅显示图像中所需的图标。

看看A List Apart's explaination of the technique。

【讨论】：

【解决方案3】：

类似于以下内容：

background-image: url('yourimage.png');
background-repeat: no-repeat;
background-position: 25px 0px;

有关背景位置的更多信息，请参阅http://www.w3schools.com/css/pr_background-position.asp

【讨论】：

以上链接现已失效。改用这个：w3schools.com/css/css_image_sprites.asp
@javid 我刚刚阅读了您的有用链接，但他们说精灵技术很有用，并解释说我同意 w3school。但是“包含许多图像的网页可能需要很长时间才能加载并生成多个服务器请求”这句话呢？以任何方式分隔图像您必须使用 url 属性多次调用图像。