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

如何设置CSS background-image属性只是从较大的图像加载一个特定的图标？CSS：从图像文件中显示一个特定的图标

例如，jQuery UI使用以下PNG图像文件为其对话窗口小部件创建主题： 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)，但没有关于选择一个特定的图标。

来源

2009-09-30 Jerry Chong

它实际上是一个CSS精灵技术。

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; 
}

来源

2009-09-30 05:09:45 rahul

类似如下：

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

看到http://www.w3schools.com/css/pr_background-position.asp以获得更多关于背景位置

来源

2009-09-30 05:10:05

感谢分享 – 2012-04-11 13:08:47

上面的链接现在已被打破。用这个代替：http://www.w3schools.com/css/css_image_sprites.asp – Javide 2013-09-06 00:45:42

@javid我刚刚阅读你的工作有用的链接，但他们告诉精灵技术是有用的，并解释我也同意w3school。但是这个声明呢“一个包含许多图像的网页可能需要很长时间才能加载并生成多个服务器请求。”分离图像任何你必须多次使用url属性调用图像。 – user2826111 2013-10-09 10:07:29

Under the covers...

锚固元件固定大小和背景被设定为包含所有图标但仅包含背景位置属性的图像是特定的编辑移动背景图像，以便只显示图像中所需的图标。

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

来源

2009-09-30 05:16:03 MyItchyChin

谢谢这真的帮了我...... – User 2015-03-02 04:53:10

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

回答

相关问题