Html 悬停子对象时不要移动背景图像

我有类似的东西

<div id="hover_parent">
  <h3>Something</h3>
  <h3>Something else</h3>
</div>

#hover_parent{
    background-image:url(animage.jpg) no-repeat;
    background-position:bottom left;
    background-size:cover;
    width:100%;
}

h3{
    margin-top:20px;
    width:50%;
    text-align:center;
    transition:0.2s;
}

h3:hover{
    margin-top:0px;
}

所以我想要实现的是，子元素在悬停时向上移动一点。当然，它们在悬停时使用较小的边距上限。 但我的问题是，当悬停子元素时，整个父元素（尤其是背景图像）也会向上移动

我怎样才能避免呢

我的子元素都没有真正的绝对高度，所以我没有提供最小高度和计算，但这可以做到-也不能尝试这个。h3所需显示：内联块

悬停父项{ 背景：urlhttps://dummyimage.com/600x400/000/fff 不重复； 背景位置：左下角； 背景尺寸：封面； 宽度：100%； 颜色：fff； 高度：200px； } h3{ 边缘顶部：20px； 宽度：50%； 文本对齐：居中； 过渡：0.2s； 显示：内联块； } h3：悬停{ 边际上限：0px； } 某物 别的

---

是 啊但在您的示例中，背景无论如何都比内容大。如果你使用背景，你会发现我的问题：url不重复；然后，您将需要达到您的div所需的高度