背景位置在页面加载时被删除

Question

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

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

问题： 但是，加载页面时，图标没有显示。在 chrome 和 firefox 上检查时，我可以看到精灵图像，这是 class locicon :

的运行时定义

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

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

注意：在此处发帖之前，我什至尝试使用普通的 HTML 文件，包括 css 文件，并进行了测试，仍然是同样的问题。 background-position 正在运行时删除！

注意：由于这个关联问题，即使在解决此问题后，Sprite 也不会出现在我的案例中，现在已纠正：仅供参考：

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 is removed on page load

html

css

css-sprites