如何從頂部到底部減少元素的高度，而不是從默認的底部到頂部？

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