html - How can I decrease the height of an element top to bottom rather than the default bottom to top?

Question

I have an image that represents a gauge in a game I'm making and, from testing it, I realized that decreasing the height takes away from the bottom rather than the top. I'd like to invert this somehow. Is there anyway to?

Answer 1

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

例如，如果您的背景图像文件是 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;
}