Question

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

我使用了一个在线工具来创建精灵，我得到了一个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; }

选择器的背景是使用图片网址。如何用精灵图像指示符（类/ id）替换该URL链接，而不是为每个小图像使用本地链接。因为我最初在css文件中通过url调用了很多图像，现在我需要用精灵图像替换它们。但我不知道如何在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中按类/ id调用精灵图像？

1 个答案: