Question

我有一个HTML页面，试图从精灵图像中显示一些图标。我添加了css文件，并将精灵图像放在当前工作目录中。作为参考，其中一个图标的定义如下所示，

.locicon{
        background-position: -61px -110px ;
        width: 20px;
        height: 20px;
        background: url(htsprite1.png) no-repeat;
    }

问题：但是，加载页面时，图标不会显示。检查chrome和firefox时，我可以看到sprite图像，这是类locicon的运行时定义：

.locicon{
            width: 20px;
            height: 20px;
            background: url(htsprite1.png) no-repeat;
        }

除background-position以外的所有内容。为什么会这样？我检查了这个属性是否在某处被覆盖，并且在检查元素时找不到任何这样的实例。

注意：在发布之前，我甚至尝试过使用普通的HTML文件，包括css文件，并经过测试，仍然是同样的问题。 background-position在运行时被删除了！

注意：由于此链接问题，即使在解决此问题后，Sprite也不会出现在我的案例中，现在已经纠正：仅供参考：CSS sprite not appearing in Firefox, but displaying in Chrome

Answer 1

background-position覆盖了您background。然后尝试设置background-position：

background: url(htsprite1.png) no-repeat;
background-position: -61px -110px;

更清洁的解决方案是分别设置背景属性：

background-image: url(htsprite1.png);
background-repeat: no-repeat;
background-position: -61px -110px;

页面加载时删除background-position

1 个答案: