我网站的标题中有一些 css sprites,但是当页面加载时,它通常会加载 8 个单独图像中的几个,就在它本来的位置下方。然后我等几秒钟或将鼠标悬停在它们上面,它就会回到正确的位置。
这是我的 CSS:
.x {
display: inline-block }
.x a {
display:block;
width:100px;
height:100px;
overflow:hidden;}
.x a:hover img {
margin-left:-100px;}
然后 HTML 是这样的:
<div class='x'><a href='link' alt='y'><img src=
'image' /></a></div>
<div class='x'><a href='link' alt='y'><img
src='image' />
</a></div>
连续 8 个独立的 100x100 方 block 。
最佳答案
定义 css sprite 的方式与您的做法略有不同。
这是一个如何实现这一目标的示例。
/* This is how to define a main image
.sprite { background: url("../link/to/spriteimage.png") 0px 0px; width: 32px; height: 32px; }
/* Assign an image like this way, by changing the position
.sprite.icon1 { background-position: -32px -32px; }
.sprite.icon1_hover { background-position: -64px -32px; }
Demo
关于css sprites - 悬停图像未正确加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9602872/