如何从顶部到底部减少元素的高度而不是从底部到顶部的默认值？

Question

我有一个图像代表我正在制作的游戏中的一个标尺，并且通过测试它，我意识到降低高度会从底部而不是顶部消失。我想以某种方式反转这一点。无论如何都有？

Answer 1

将元素的background-position属性的y位置值调整为图像上方的设定距离。

例如，如果您的背景图像文件高100像素，并且您将div设置为30像素高，那么背景图像的y位置需要比div顶部高70像素像素似乎从图像顶部消失。

HTML：

<div id="my-div"></div>

CSS：

#my-div {
  height: 30px;
  background-image: url( 'my-image.png' );
  background-position: 0px -70px;
}