CSS Sprites Bottom重复

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

我发现你的backgroundCSS属性有问题......我会把它分解

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

...所以浏览器无法解析您的CSS属性.如果您在Firefox中加载此宝贝并查看错误控制台("工具">"错误控制台"),您将看到以下内容:

解析'background'的值时出错.宣言下降.

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

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.