如何在css中按类/ id调用精灵图像？(How can I call a sprite image by class/id in css?)

如何在css中按类/ id调用精灵图像？(How can I call a sprite image by class/id in css?)

我现在正在创建一个网站，其中包括许多微小的图像，如箭头和按钮。 我必须将所有这些微小的图像包含在同一个精灵图像中。

我使用了一个在线工具来创建精灵，我得到了一个css文件，指示精灵中的不同图像作为输出，以便将它们包含在我的项目中。

我可以使用以下方法检索我的html文件中的精灵图像：

<div class='sprite arrow-down'></div>

我的问题是。 例如，我现在尝试用我的精灵替换我的下拉选择器的箭头图像。

虽然我的选择器的原始编码是这样的样式：

.newSelector select{ background: transparent url(../img/button/arrow.png) no-repeat right center;; width: 75px; text-align: center; color:#777777; }

选择器的背景是使用图像URL。 如何用精灵图像指示符（类/ id）替换该URL链接，而不是为每个小图像使用本地链接。 因为我最初在css文件中通过url调用了很多图像，现在我需要用精灵图像替换它们。 但我不知道如何在css文件甚至javascript文件中使用它。 请给我一些指示或建议。 非常感谢您的参与！！

I am now creating a website which are including much tiny images like arrows and buttons. And I have to include all of those tiny images into the same sprite image.

I have used a online tool to create the sprite and I got a css file indicating different images in sprite as output in order to include them in my project.

And I can use the following way to retrieve the sprite image in my html file:

<div class='sprite arrow-down'></div>

And my question is that. for example, I am now trying to replace an arrow image of my dropdown selector with my sprite.

While the original coding for my selector is styling in this way:

.newSelector select{ background: transparent url(../img/button/arrow.png) no-repeat right center;; width: 75px; text-align: center; color:#777777; }

That the background of selector is using the image url. How can I replace that url link with the sprite image indicator (class/id) instead of using local links for every small images. Because I have a lot of images calling by the url in css file originally and I am now required to replace them all with the sprite image. But I have no idea how can I work it in a css file or even a javascript file. Please kindly give me some directions or suggestions please. Thank you so much for your time！！

最满意答案

这是一些使用background-position基本代码

图像具有以下箭头序列： v-<->-^

css中的类具有使用width * index计算的序列位置的背景。 如果你的精灵变得太大，你可以通过SASS http://sass-lang.com/中的循环轻松解决它。

.sprite {
  width: 80px;
  height: 160px;
  background: transparent url(https://placeholdit.imgix.net/~text?txtsize=110&bg=FF6347&txtclr=ffffff&txt=v-<->-^&w=350&h=160) no-repeat;
  float: left;
  margin: 10px;
}

.arrow-down {
  background-position: 0 0;
}
.arrow-left {
  background-position: -80px 0;
}
.arrow-right {
  background-position: -160px 0;
}
.arrow-up {
  background-position: -240px 0;
}
img { display: block } 
  
<img src='https://placeholdit.imgix.net/~text?txtsize=110&bg=FF6347&txtclr=ffffff&txt=v-<->-^&w=350&h=160' />
<div class='sprite arrow-up'></div>
<div class='sprite arrow-down'></div>
<div class='sprite arrow-left'></div>
<div class='sprite arrow-right'></div> 
  
 
Here is some basic code that uses background-position
 
The image has this arrow sequence: v-<->-^
 
The classes in css have backgrounds in sequence position calculated with width * index. If your sprite grows too big, you can easily solve it with a loop in SASS http://sass-lang.com/
 
 
 
  
  
.sprite {
  width: 80px;
  height: 160px;
  background: transparent url(https://placeholdit.imgix.net/~text?txtsize=110&bg=FF6347&txtclr=ffffff&txt=v-<->-^&w=350&h=160) no-repeat;
  float: left;
  margin: 10px;
}

.arrow-down {
  background-position: 0 0;
}
.arrow-left {
  background-position: -80px 0;
}
.arrow-right {
  background-position: -160px 0;
}
.arrow-up {
  background-position: -240px 0;
}
img { display: block } 
  
<img src='https://placeholdit.imgix.net/~text?txtsize=110&bg=FF6347&txtclr=ffffff&txt=v-<->-^&w=350&h=160' />
<div class='sprite arrow-up'></div>
<div class='sprite arrow-down'></div>
<div class='sprite arrow-left'></div>
<div class='sprite arrow-right'></div>