图像精灵页面的创建

如何解决图像精灵页面的创建

我一直在尝试在我的网页上使用图像精灵。我理解这个概念，我认为我理解了编码，但不明白为什么我的定位需要所有负值。这似乎有效，但不是我想的。我认为当我从左到右浏览精灵页面时，x 值会增加。相反，我必须使用负值。该工作表只有三张图像，排成一行。如果它必须是列，那么你怎么能在同一个精灵页面上有一堆图像？全部在一个巨大的列中？？？

我的另一个问题是使图像具有响应性。有几篇关于此的文章和示例，我不知道什么是最佳选择。我的网站是托管的，所以我的管理控制有限。

这是我所拥有的：

<html>
<head>

<style>
.sprite{
background: url("https://www.texasbranderspromotional.com/files/banner-ad-sprites.jpg") no-repeat;
}

.notebook {
width: 500px;
height: 350px;
display: inline-block;
background-position: -9px -10px;
}

.grippen {
width: 500px;
height: 350px;
display: inline-block;
background-position: -530px  -10px;
}

.kooziecooler {
width: 500px;
height: 350px;
display: inline-block;
background-position: -1050px -10px;  
}

</style>

</head>
<body>

<span class="sprite notebook"></span>

<span class="sprite grippen"></span>

<span class="sprite kooziecooler"></span>

</body>
</html>