0

我尝试让 css sprite 在我的页面上工作。但如果我添加背景重复：不重复。然后 css sprite 停止工作。如果我从我的样式表中删除它，将再次工作。

我不知道为什么我不能使用后台重复。

这是我的代码。我也将它上传到 jsfiddle，你可以在那里测试它。

http://jsfiddle.net/F49b5/2/

        <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>
4

2 回答 2

2

尝试将背景位置切换为 -194px 而不是 194px：

#logo a
{
    background-position: 0 -194px;
    width: 309px;
    height: 133px;
    display: block;
}

通过将 y 轴设置为 194 像素，它会将背景图像向下推 194 像素，这超出了您的 #logo 高度的视图。相反，您需要通过将 y 轴设置为负数来“拉起”图像。

于 2012-05-30T15:49:33.687 回答
0

您已将背景位置设置在框的高度之外。

重复从元素的 0:0 重复整个图像，这就是您看到它的原因。

删除您的背景位置，它将起作用。

于 2012-05-30T15:50:31.147 回答