Question

如何使用css从一张图像中获取大型图像中的特定图像

e.g。 Jquery ui图标有一个大图像但使用css类它只检索特定的图像图标。

Answer 1

首先，您创建适当的视口div：

<div class="ui-icon alert-icon"></div>

然后定义CSS：

.ui-icon { width:16px; height:16px; overflow:hidden; background:url(images/icons.png); }
.alert-icon { background-position:0 0; }
.warrning-icon { background-position:0 -16px; }

注意 - 我们的ui-icon类为每个图标应用默认值。类alert-icon和warrning-icon是自定义图标的示例。他们只是移动背景图像显示了icons.png图像的正确部分。

根据主要素材图片的布局，您必须以更多/更少像素或不同方向（+/-）移动图像。

Answer 2

您可以为它们分配相同的类，或者您可以通过标记名称获取它们。获取图像数组.. class it retrieves only perticular image icon您的意思是ID，每个文档只允许一个ID，但您可以在多个元素上使用class，因此使用类选择器检索它们。

修改

e.g。 Jquery ui图标有一个大图像，但使用css类，它可以重现只有特殊图像图标。

你可能的意思是，你正在使用图像精灵？所以你只想得到那个大图像的一部分（比如jquery ui），你需要做的就是background position。谷歌图像精灵我相信你会找到足够的资源，这就是我如何解决它

Answer 3

使用标准尺寸制作div，然后像这样应用：

<style>#jd {
display:block;
overflow:hidden;
background-image:url(1.png);
background-repeat:no-repeat;
height:100px;
width:100px;}.j1 { background-position: 0px 0px;}.j2 {background-position: 0px -99px;}</style><div id="jd" class="j1"></div><hr><div id="jd"  class="j2"></div>

如何使用css从一个图像中获取大型图像中的特定图像

3 个答案: