<分区>
html - CSS Sprite 中的 `background-position` 使用负值
我的问题是关于 background-position 属性的负值。
我正在阅读 Jon Duckett 的 HTML 和 CSS，我有以下 Sprite 图，其中每个按钮的高度为 40 像素。
我还从书中生成了一些以下代码，以在用户悬停并点击这些按钮时激活这些 Sprite 。
a.button {
height: 36px;
background-image: url("https://image.ibb.co/jnHrwk/button_sprite.jpg");
text-indent: -9999px;
display: inline-block;
}
a#add-to-basket {
width: 174px;
background-position: 0px 0px;
}
a#framing-options {
width: 210px;
background-position: -175px 0px;
}
a#add-to-basket:hover {
background-position: 0px -40px;
}
a#framing-options:hover {
background-position: -175px -40px;
}
a#add-to-basket:active {
background-position: 0px -80px;
}
a#framing-options:active {
background-position: -175px -80px;
}<!DOCTYPE html>
<html>
<head>
<title>Image Rollovers and Sprites</title>
</head>
<body>
<a class="button" id="add-to-basket">Add to Basket</a>
<a class="button" id="framing-options">Framing Options</a>
</body>
</html>现在，在示例代码中，要选择框架选项，属性 background-image 被赋予值 -175px 0px。
但是，我认为图像是通过 CSS 中的坐标系统查看的，如下所示，我想向右移动，它将是 175px 0px 并向下移动 40px， 175 像素 40 像素。
为什么在这个例子中向左和向下给出负值？
最佳答案
您实际上是在坐标系中移动/平移 Sprite 图像。改编自对 css sprite with negative background positions not clear 的回答, 要在 x=50 和 y=20 的位置显示图像，请将 Sprite -50 移到坐标系的左侧，-20 移到坐标系的顶部。
-50, -20
|-----------------------------------------------|
| |
| 0,0 |
| |-- |
| | |
| |
| |
| |
|-----------------------------------------------|
关于html - CSS Sprite 中的 `background-position` 使用负值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45943352/