背景位置在页面加载时删除 [英] background-position is removed on page load

问题描述

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

I have a HTML page that tries to display some icons from a sprite image. I added the css file, and also put the sprite image in the current working directory. For reference, one of the icon has the definition like as shown below,

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

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

Problem: However, when the page is loaded, the icons are not getting displayed. When inspecting on chrome and firefox, I can see the sprite image, and this is the runtime definition of the class locicon :

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

除了 background-position 。为什么会这样发生？
我检查这个属性是否被覆盖某处，并且在检查该元素时找不到任何此类实例。

Everything except the background-position. Why is it happening like this? I checked if this property is overriden somewhere and couldn't find any such instance while inspecting on the element.

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

Note: Before posting here, I even tried with a plain HTML file , including the css file, and tested, still the same issue . background-position is getting removed at runtime!

注意：Sprite不会出现在我的case甚至在解决这个问题后，因为这个链接问题，这是现在纠正：仅供参考： CSS sprite不出现在Firefox中，但在Chrome中显示

Note: The Sprite wont appear in my case even after resolving this because of this linked issue, which is rectified now : Just for reference: CSS sprite not appearing in Firefox, but displaying in Chrome

推荐答案

c $ c> background-position 被 background 覆盖。尝试之后设置 background-position ：

You background-position is overwritten by background. Try to set the background-positionafterwards:

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

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

A cleaner solution would be to set the background properties separately:

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

这篇关于背景位置在页面加载时删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！