css - CSS Image Sprite - 无效的属性值

Question

按照教程学习使用精灵菜单。但出于某种原因，Chrome 在某些背景位置行上给了我一个“无效的属性值”。第一个，位置 0 0 工作正常，但其他两个 -33 0 和 0 -33 将不起作用，这意味着我的网站现在只显示 1 个按钮，并且未应用悬停。我现在使用的图片是 197x65

  #sidebar .content .follow a {
                            display: block; float: left; height: 32px;
                            background-image: url('http://s23.postimg.org/8ltupgj0r/follow.png'); text-indent: -9999px;  
                            margin-right: 5px;
                            }

                           #sidebar .content .follow a.fb {
                               width: 32px; background-position: 0 0; }
                           #sidebar .content .follow a.twit {
                               width: 32px; background-position: -33 0; }

                           #sidebar .content .follow a.fb:hover {
                               background-position: 0 -33; }

Answer 1

在背景位置属性上，您需要设置您想要的值类型，px、em 等。CSS 理解 0，但您需要更具体地设置其他值。

#sidebar .content .follow a.twit {
    width: 32px; background-position: -33px 0; }
#sidebar .content .follow a.fb:hover {
    background-position: 0 -33px; }