css - 如何修复在 Chrome 中再次加载图像

Question

我正在使用图像 Sprite 。所有图像都保存在一个 my_images_sprite.png 中。在 Chrome 中，加载页面时(加载并显示所有图像)，如果我将鼠标悬停在页面上的图像上，它的图像将再次开始加载。

编辑:

<a href="/subscribe" id="download-btn">
              <span class="big">Click</span>                 
              <span class="icon"></span>
</a>

CSS: 
#download-btn {
display: block;
width: 192px;
height: 61px;
position: relative;
cursor: pointer;
text-decoration: none;  
background-image: url(http://localhost:5000/assets/icons-sc0fd629fcc.png);
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-position-x: 0px;
background-position-y: -2082px;
background-origin: initial;
background-clip: initial;
background-color: initial;
color: #581B89;
}

如何解决这个问题？

在 Firefox 中一切正常。

Answer 1

我认为这与您使用不同的 url 两次设置背景图像有关:

background: url(/assets/icons-sc0fd629fcc.png) 0 -2082px no-repeat;
background-image: url(http://localhost:5000/assets/icons-sc0fd629fcc.png);

删除 background-image 属性，您应该没问题!