CSS精灵底部重复

你能重复一个精灵背景吗？我希望精灵背景设置在div底部。我有：

.statistics-wrap {
    margin-top: 10px;
    background: url(../img/bg-sprite.png) repeat-x 0 -306px bottom;
    overflow: hidden;
    border: 1px #BEE4EA solid;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 10px;
}

它似乎不会出现，如果我移除底部，它将出现，但它设置在背景中，在div顶部水平重复，我希望它在底部重复

---

可能吗

您是否尝试过设置

底部：0在它自己的行上，并将其从
背景中删除：
？
您是否尝试过设置
底部：0在自己的行上，并将其从
背景中删除：
？
背景：url（../img/bg sprite.png）repeat-x-306px 100%

但是我不确定一个精灵是否是一个好主意，因为我认为你希望实现它。
背景：url（../img/bg sprite.png）repeat-x-306px 100%

但我不确定精灵是否是一个好主意，因为我认为您希望实现它。
我发现您的
背景
CSS属性有问题。。。我会把它分解

background:                   /* property name */
    url(../img/bg-sprite.png) /* background-image */
    repeat-x                  /* background-repeat */
    0 -306px                  /* background-position */
    bottom                    /* ummm... what?! */

。。。因此浏览器无法解析您的CSS属性。如果您在Firefox中加载这个宝贝并查看错误控制台（“工具”>“错误控制台”），您将看到以下内容：

分析的值时出错
“背景”。声明被撤回

所以我知道你在想什么。。。只需删除“底部”，对吗？但是接下来会发生什么

background:                   /* property name */
    url(../img/bg-sprite.png) /* background-image */
    repeat-x                  /* background-repeat */
    /* background-position...               */
     0                        /* x-position */
     -306px                   /* y-position */

现在，您的背景图像偏移了
-306px
，这可能不在
的底部。如果你真的不走运，它甚至会远远超过
的底部，没有人能看到你的背景图像

所以试着做点像这样的事情

background: url(../img/bg-sprite.png) repeat-x 0px bottom

或者

background: url(../img/bg-sprite.png) repeat-x -306px bottom

。。。取决于你为什么在那里有
-306px
。
我发现你的
背景
CSS属性有问题。。。我会把它分解

background:                   /* property name */
    url(../img/bg-sprite.png) /* background-image */
    repeat-x                  /* background-repeat */
    0 -306px                  /* background-position */
    bottom                    /* ummm... what?! */

。。。因此浏览器无法解析您的CSS属性。如果您在Firefox中加载这个宝贝并查看错误控制台（“工具”>“错误控制台”），您将看到以下内容：

分析的值时出错
“背景”。声明被撤回

所以我知道你在想什么。。。只需删除“底部”，对吗？但是接下来会发生什么

background:                   /* property name */
    url(../img/bg-sprite.png) /* background-image */
    repeat-x                  /* background-repeat */
    /* background-position...               */
     0                        /* x-position */
     -306px                   /* y-position */

现在，您的背景图像偏移了
-306px
，这可能不在
的底部。如果你真的不走运，它甚至会远远超过
的底部，没有人能看到你的背景图像

所以试着做点像这样的事情

background: url(../img/bg-sprite.png) repeat-x 0px bottom

或者

background: url(../img/bg-sprite.png) repeat-x -306px bottom

。。。取决于你为什么在那里有-306px这个词。
“…取决于你为什么在那里有-306px这个词”我必须同意理查德的观点，精灵这个词当然意味着你在一个文件中有多个图像。我敢肯定，你想要完成的事情，是不会和一个精灵配合得很好的，把痛苦留到雨天，然后把你的背景放在一个单独的文件里。精灵适用于固定宽度和高度的包装（div），如图标、滑动门等！“…取决于你为什么会有-306px”我必须同意Richard的说法，精灵这个词当然意味着你在一个文件中有多个图像。我敢肯定，你想要完成的事情，是不会和一个精灵配合得很好的，把痛苦留到雨天，然后把你的背景放在一个单独的文件里。精灵适用于固定宽度和高度的包装（div），如图标、滑动门等！您可以使用伪元素您可以使用伪元素