0

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

可能吗？

4

3 回答 3

5

我发现您的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:                   /* 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那里。

于 2010-06-03T20:48:08.817 回答
1

背景：url(../img/bg-sprite.png) 重复-x -306px 100%；

但我不确定精灵是否是一个好主意，因为我认为你希望完成。

于 2010-06-03T20:36:43.087 回答
0

您是否尝试过设置bottom:0;它自己的线路并将其从中删除background:？

于 2010-06-03T20:27:00.797 回答