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

您必须将position:relative添加到父<div>，然后将position: absolute;添加到<img>。像这样：

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

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

Answer 3

如果我正确理解您的问题，您只需将此样式添加到图像所在的div中。

div > img {
    margin-top: 50px;
    margin-left: 50px;
}

Answer 4

使用margin属性在元素周围创建边距。您还可以在div元素上使用padding。

试试这样：

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

Answer 5

您可以通过在代码中添加类名 CSS

将图片链接到<img>类

工作示例：

＆＃13;

body {
  background: #111
}
.OverviewText4 {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50px;
  left: 50px;
}

＆＃13;

<body>
  <img src="MoneyIcon.png" class="OverviewText4" />
</body>

＆＃13;

Answer 6

根据众多答案，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。

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

6 个答案: