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

Question

我有一个位于 div 内的图像，我正在尝试将其向下移动 50 像素和向左移动 50 像素，以完成所有操作。但是我不确定如何在 CSS 中编辑图像，因为我不知道要输入什么代码来将照片连接到 CSS。

我的代码：

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

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

感谢您的帮助

原文由 Sid 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据众多答案，在 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 标签，如果它只是展示性的，这是可取的。

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

原文由 AndFisher 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

 #OverviewText4 {
    position: relative;
}

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

原文由 elmarko 发布，翻译遵循 CC BY-SA 3.0 许可协议