如何使用CSS在div中移动图像？

Question

我有一个位于div内部的图像,我试图将其向下移动50 px并向下移动50 px以使所有内容都完整.但我不知道如何编辑CSS中的图像,因为我不知道将照片连接到css的代码.

我的代码:

#OverviewText4 img:MoneyIcon.png {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50px;
  left: 50px;
}

<div id="OverviewText4">
  <img src="MoneyIcon.png" />
</div>

谢谢你的帮助

Answer 1

从声明中删除图像名称,并确保将容器设置为position: relative使图像绝对定位在此实例中的右包含元素#OverviewText4

#OverviewText4 {
    position: relative;
}

#OverviewText4 img {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50px;
    left: 50px;
}

Answer 2

根据众多答案，CSS 有很多方法可以做到这一点。如果我建议，由于示例中的图像名称与图像相关，因此采用略有不同的方法：

#OverviewText4 {
    position: relative;
}
#OverviewText4:before {
  content: "";
  background: transparent url(MoneyIcon.png) scroll no-repeat 0 0;
  background-size: cover;
  width: 150px;
  height: 150px;
  position: absolute;
  display: block;
  top: 50px;
  left: 50px;
}

https://jsfiddle.net/zk8su1qw/

这样，您甚至不需要 HTML 中的 img 标签，如果它只是展示性的，这是理想的。

此答案中还假设您希望图像显示在 div 中任何内容的顶部OverviewText4，而不是让内容围绕图像流动。如果不是这种情况，您可能需要使用边距并保留图像position: static或relative.