如何在 css 中通过 class/id 调用精灵图像？

Question

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

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

而且我可以使用以下方式在我的 html 文件中检索精灵图像：

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

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

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

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

选择器的背景正在使用图像url。我如何用 sprite 图像指示符 (class/id) 替换 url link 而不是对每个小图像使用本地 links。因为我原来有很多css文件中的url调用的图像，现在我需要用sprite图像替换它们。但我不知道如何在 css 文件甚至 javascript 文件中使用它。请给我一些指示或建议。非常感谢您的宝贵时间！！

Answer 1

这是一些使用 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>

如何在 css 中通过 class/id 调用精灵图像？

How can I call a sprite image by class/id in css?

html

css

image

sprite