0

所以我正在尝试将一些图像制作成精灵。我以为我很清楚自己在做什么，但是我没有得到 6 个不同的图像，而是 6 次得到 1 个压缩的图像。

这是我的代码

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 张我的精灵的图像被调整大小和扭曲，当我希望它给我一个只有一部分的调整大小的图像时。由于某种原因，它没有裁剪。

4

1 回答 1

0

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

同样在您的 css 中，您在“背景图像”属性中具有位置坐标，这也不起作用，它需要位于通用“背景”CSS 属性或特定的“背景位置”属性中。见http://www.w3schools.com/cssref/css3_pr_background.asp

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

于 2013-08-09T16:16:17.083 回答