Question

所以我试图将一些图像变成精灵。我以为我很清楚自己在做什么，但后来我没有得到6张不同的图像，而是获得了6次压缩图像。

这是我的代码

img.sprite
{
width:100px;
height:100px;
background-image:url(myimage.jpg) 0 0;
}

img.sprite2
{
width:100px;
height:100px;
background-image:url(myimage.jpg) -100px 0;
}
</style>

</head>

<body>
<img class="sprite" src="myimage.jpg" width="1" height="1" />

<img class="sprite2" src="myimage.jpg" width="1" height="1" />

当我发布这个时，我的图像被压扁，所以我有6张我的精灵图像被调整大小和扭曲，当我想要它给我一个只有一部分的重新调整大小的图像。由于某种原因，它没有出现。

Answer 1

您正在将背景图像与内嵌图像组合在一起，但这不起作用。背景图像用于div和其他页面元素之类的东西。

同样在你的css中，你在'background-image'属性中有位置坐标，这也不起作用，它需要在通用的'background'css属性或特定的'background-position'属性中。见http://www.w3schools.com/cssref/css3_pr_background.asp

如果您需要在内联图片上使用它，请尝试使用css clip http://css-tricks.com/css-sprites-with-inline-images/

这项技巧

CSS Sprite正在挤压而不是裁剪

1 个答案: