html - 如何降低元素从上到下的高度而不是默认的从下到上？

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;
}