如何用精灵设置背景位置？答案

【问题标题】：How to set background-position with sprites?如何用精灵设置背景位置？
【发布时间】：2017-01-01 16:53:10
【问题描述】：

你好，新年快乐：D 所以这里有一个问题：我想在页面上显示 6 个带有精灵的热气球。实际精灵包含 6 个彩色气球。让我们看看代码和结果。

HTML：

<div class="hotairballoons">
    <div class="ball-1"></div>
    <div class="ball-2"></div>
    <div class="ball-3"></div>
    <div class="ball-4"></div>
    <div class="ball-5"></div>
    <div class="ball-6"></div>
</div>

CSS：

.hotairballoons > div[class^="ball-"] {
    background: url(../img/sprites.png);
    background-repeat: no-repeat;
    width: 69px;
    height: 110px;
}

.ball-1 {
    background-position: 0px 0px;
}

.ball-2 {
    background-position: -69px 0px;
}

.ball-3 {
    background-position: -138px 0px;
}

.ball-4 {
    background-position: 0px -110px;
}

.ball-5 {
    background-position: -69px -110px;
}

.ball-6 {
    background-position: -138px -110px;
}

结果：

开发者控制台中显示的内容：

为什么会交叉？我做错了什么？

【问题讨论】：

标签： html css css-sprites css-specificity

【解决方案1】：

效果很好。

但如果你想更正控制台，你应该在每个background-position 的末尾添加!important ！

【讨论】：