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

Question

我有一张图片代表了我正在制作的一款游戏中的测量仪，并且从测试中我意识到降低高度会从底部而非顶部带走。我想以某种方式反转。反正有吗？

Answer 1

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

例如，如果您的背景图像文件高度为100像素，并且您将div设置为30px高，那么背景图像的y位置将需要在div顶部以上70像素使像素看起来像从图像的顶部消失。

HTML：

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

CSS：

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