我尝试让 css sprite 在我的页面上工作。但如果我添加背景重复:不重复。然后 css Sprite 停止工作。如果我将它从我的样式表中删除，它将再次工作。
我不明白为什么我不能使用 background-repeat。
这是我的代码。我也上传到jsfiddle，你可以在那里测试。
<html>
<head>
<style type="text/css">
#logo a, .vote-up-off, .vote-up-on, .vote-down-off, .vote-down-on, .star-on
{
background-image: url("http://i14.photobucket.com/albums/a332/007bond-jb/food/burger2.jpg");
overflow: hidden;
background-repeat: no-repeat; /*this is the problem, remove it, it will work */
}
#logo a, .vote-up-off, .vote-up-on, .vote-down-off, .vote-down-on, .star-on, .star-off, .flag-off, .vote-accepted-off, .vote-accepted-on
{
font-size: 1px;
text-indent: -9999em;
}
#logo a
{
background-position: 0 194px;
width: 309px;
height: 133px;
display: block;
}
</style>
</head>
<body>
<div id="logo">
<a href="/" title="test">test</a>
</div>
</body>
</html>
最佳答案
尝试将背景位置切换为 -194px 而不是 194px:
#logo a
{
background-position: 0 -194px;
width: 309px;
height: 133px;
display: block;
}
通过将 y 轴设置为 194px，它会将背景图像向下推 194px，这超出了您的 #logo 高度的视野。相反，您需要通过将 y 轴设置为负数来“拉起”图像。
关于css - 无法让 css Sprite 与背景重复一起工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10819684/