CSS:显示图像文件中的一个特定图标

如何设置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我可以看到一些像ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se应用所引用的CSS属性url(ui-icons.xx.png),但没有关于选择特定图标的信息.

它实际上是一种CSS精灵技术.

CSS Sprites:它们是什么,为什么它们很酷,以及如何使用它们

使用

背景位置

属性

如果指定了背景图像,则此属性指定其初始位置.如果只指定了一个值,则假定第二个值为"center".如果至少一个值不是关键字,则第一个值表示水平位置,第二个值表示垂直位置.允许负值和值.

例如:

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属性是一个简写属性,用于在样式表中的单个位置设置各个背景属性值.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;
} 

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

看看A List Apart对技术的解释.

类似于以下内容:

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

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