html - 要素の高さをデフォルトの下から上ではなく上から下に下げるにはどうすればよいですか?

Question

私が作成しているゲームのゲージを表す画像があり、それをテストしたところ、高さを下げると上部ではなく下部がなくなることがわかりました。これを何とか反転させたい。とにかくすることはありますか？

Answer 1

background-position要素のプロパティのy 位置の値を調整して、画像の上の設定距離にします。

たとえば、background-image ファイルの高さが 100px で、その div を 30px に設定した場合、background-image の y 位置は、ピクセルを div の上部から 70 ピクセル上にする必要があります。画像の上から消えて見えます。

HTML:

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

CSS:

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