CSS Sprites底部重复

您可以底部重复一个Sprite背景，我希望Sprite在底部的底部设置背景。我有这样的：它似乎CSS Sprites底部重复

.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的顶部水平重复设置在底部。

可能吗？

来源

2010-06-03 MacMac

您可以使用伪元素http://stackoverflow.com/questions/8363535/how-to-position-an-image-sprite-at-the-bottom-of-an-element-of-unknown-height – mvod 2012-01-28 16:35:04

我看到一些问题与您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，并检查了错误控制台（“工具”>“错误控制台”），你会看到沿着线的东西：对 “背景”在解析值

错误。声明下降了。

所以我知道你在想什么......只是删除'底部'，对吧？但随后发生的事情......

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-03 20:48:08

“......这取决于你为什么在那里有-306px的原因”我必须同意理查德的观点，精灵术语表示你在一个文件中有多个图像。你想要完成的事情我非常肯定，不会对精灵做得很好，为下雨天保存痛苦，并将你的背景放在一个单独的文件中。精灵对于具有固定宽度和高度的包装（div）是很好的，即。图标，推拉门等！ – Phliplip 2010-06-03 20:54:13

非常解释。谢谢。 – MacMac 2010-06-03 20:57:54

这会工作吗？ – 2010-06-28 12:33:52

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

来源

2010-06-03 20:27:00 edl

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

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

来源

2010-06-03 20:36:43 Phliplip

CSS Sprites底部重复

回答

相关问题