Question

我的问题是关于background-position属性的负值。

我正在阅读Jon Duckett撰写的HTML和CSS，我有以下精灵，每个按钮的高度为40px。

当用户将鼠标悬停并点击这些按钮时，我还从书中产生了一些以下代码来激活这些精灵。

		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，{{1} }。

为什么在这个例子中给出负值左右？

Answer 1

您实际上是在坐标系中移动/翻译精灵图像。根据{{3}}的答案改编，要在x = 50和y = 20的位置显示图像，请将精灵-50移动到坐标系中的左侧和-20顶部。

-50, -20
|-----------------------------------------------|
|                                               |
|       0,0                                     |
|       |--                                     |
|       |                                       |
|                                               |
|                                               |
|                                               |
|-----------------------------------------------|

CSS中的`background-position`使用负值

1 个答案: