如何使用精灵设置背景位置？

Question

Hello and Happy New Year: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;
}

结果：

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

为什么是交叉的？我做错了什么？

Answer 1

它工作正常。

但是如果你想更正控制台，你应该在每个 background-position !

的末尾添加 !important

如何使用精灵设置背景位置？

How to set background-position with sprites?

html

css

css-sprites

css-specificity