CSS：显示图像文件中的一个特定图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1496203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: displaying one particular icon from an image file
提问by Jerry Chong
How does one set the CSS background-imageproperty to just load one particular icon from a larger image?
如何将 CSSbackground-image属性设置为仅从较大图像加载一个特定图标？
For example, jQuery UI themes its Dialog widget using the following PNG image file: http://dev.jqueryui.com/browser/trunk/themes/base/images/ui-icons_2e83ff_256x240.png, which encodes a bunch of icons in it. Then, as demoed in http://docs.jquery.com/UI/Dialogthe bottom right resize handle loads the very last icon from the PNG.
例如，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 加载最后一个图标。
Using Firebug I can see a bunch of CSS properties like ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-seapplied that refers to url(ui-icons.xx.png), but nothing about selecting a particular icon.
使用 Firebug，我可以看到一堆 CSS 属性，例如ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se引用 的已应用url(ui-icons.xx.png)，但与选择特定图标无关。
回答by rahul
It is actually a CSS sprite technique.
它实际上是一种 CSS 精灵技术。
CSS Sprites: What They Are, Why They're Cool, and How To Use Them
CSS Sprites：它们是什么，它们为什么很酷，以及如何使用它们
use
用
property
财产
If a background image has been specified, this property specifies its initial position. If only one value is specified, the second value is assumed to be 'center'. If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position. Negative and values are allowed.
如果已指定背景图像，则此属性指定其初始位置。如果仅指定了一个值，则假定第二个值是“中心”。如果至少一个值不是关键字，则第一个值表示水平位置，第二个值表示垂直位置。允许负数和值。
Eg:
例如：
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% */
The background CSS property is a shorthand property for setting the individual background property values in a single place in the style sheet. background can be used to set the values for one or more of: background-color, background-image, background-position, background-repeat, background-attachment.
背景 CSS 属性是一种简写属性，用于在样式表的单个位置设置各个背景属性值。background 可用于设置以下一项或多项的值：background-color、background-image、background-position、background-repeat、background-attachment。
.PosBG {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}
回答by MyItchyChin
The anchor elements are fixed size and the background is set to the image containing all of the icons but the background-position property is specified to shift the background-image so that only the desired icon from the image is displayed.
锚元素是固定大小的，背景设置为包含所有图标的图像，但指定了 background-position 属性来移动背景图像，以便只显示图像中所需的图标。
Take a look at A List Apart's explaination of the technique.
回答by Jonathan Fingland
Something like the following:
类似于以下内容：
background-image: url('yourimage.png');
background-repeat: no-repeat;
background-position: 25px 0px;
see http://www.w3schools.com/css/pr_background-position.aspfor more on background-position
有关背景位置的更多信息，请参阅http://www.w3schools.com/css/pr_background-position.asp
