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

【问题标题】：How can I decrease the height of an element top to bottom rather than the default bottom to top?如何从上到下而不是默认的下到上降低元素的高度？
【发布时间】：2013-02-27 09:42:19
【问题描述】：

我有一张图片，代表我正在制作的游戏中的仪表，通过测试，我意识到降低高度会远离底部而不是顶部。我想以某种方式颠倒这个。反正有吗？

【问题讨论】：

好吧，我建议使用任何图像编辑器来裁剪它，而不是动态地进行。
我们可以看一些代码吗？您已将此标记为 CSS 问题 - 这是我们正在谈论的背景图片吗？

标签： html image css height

【解决方案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;
}

【讨论】：