Question

你能不能重复一个精灵背景，我希望精灵可以设置在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的顶部水平重复的背景中我希望它在底部重复

有可能吗？

Answer 1

我发现你的background CSS属性出了问题...我会将其分解

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

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

解析值的错误 '背景'。声明被撤销。

所以我知道你在想什么......只需删除'底部'，对吗？但那会发生什么......

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

现在您的背景图片被-306px偏移，<div>可能不在<div>的底部。如果你真的不走运，它甚至会超越background: url(../img/bg-sprite.png) repeat-x 0px bottom的底部，没有人可以看到你的背景图片。

所以尝试更像这样的东西......

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

或......

-306px

...取决于您首先拥有{{1}}的原因。

Answer 2

background：url（../ img / bg-sprite.png）repeat-x -306px 100％;

但是我不确定精灵会是一个好主意，因为我认为你想要完成。

Answer 3

您是否尝试在其自己的行上设置bottom:0;并将其从background:中删除？

CSS Sprites Bottom重复

3 个答案: