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

How to move image in div with CSS?

提问by Sid

I have an image located inside a div, I am trying to move it 50 px down and 50 px left in order to have everything complete. But I am not sure how to edit the image in the CSS since I don't know what code to put in to connect the photo to the css.

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

My code:

我的代码：

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

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

Thanks for helping

谢谢你的帮助

采纳答案by AndFisher

There are many ways to do this in CSS as per the multitude of answers. If I might suggest, since the image name in your example is related to iconography a slightly different approach:

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

https://jsfiddle.net/zk8su1qw/

This way you don't even need an img tag in the HTML, which is desirable if its just presentational.

这样你甚至不需要 HTML 中的 img 标签，如果它只是展示性的，这是可取的。

There is also an assumption in this answer that you want the image displayed over the top of any content in the OverviewText4div, rather than having content flow around the image. If this is not the case you would want to use margins and keep the image position:staticor relative.

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

回答by elmarko

Remove the image name from your declaration and make sure your container is set to position: relativeso that your image is absolutely positioned against the right containing element in this instance #OverviewText4

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

#OverviewText4 {
    position: relative;
}

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

回答by Sebastian Kaczmarek

You have to add position:relativeto parent <div>and then add position: absolute;to the <img>. Like this:

您必须添加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>

     

回答by Andrew Bone

Right, your CSS is fine but your selector is not. I think this is what you were going for.

是的，你的 CSS 很好，但你的选择器不是。我想这就是你想要的。

#OverviewText4 img[src="MoneyIcon.png"] {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50px;
  left: 50px;
}

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

I've changed img:MoneyIcon.png(which doesn't mean anything to CSS) to img[src="MoneyIcon.png"]which means an imgtag where the src= MoneyIcon.png

我已经改变了img:MoneyIcon.png（这对 CSS 没有任何意义），img[src="MoneyIcon.png"]这意味着一个img标签，其中src= MoneyIcon.png

The main problem here is if you change the src you have to change your CSS also, I'd recommend having a class like this:

这里的主要问题是，如果您更改 src，您也必须更改 CSS，我建议使用这样的类：

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

<div id="OverviewText4">
  <img class="money-icon" src="http://placehold.it/150x150" />
</div>

I hope you find this helpful.

我希望你觉得这有帮助。

回答by Jishnu V S

You can simpy do this with padding

你可以用填充来简单地做到这一点

#OverviewText4 img {
  padding:50px 0 0 50px;
}

回答by weinde

If I understand your question correctly all you have to do is add this style to your div where the image is located.

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

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

回答by ggradnig

Use the marginattribute for creating a margin around an element. You can also use paddingon the div element.

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

Try it like this:

像这样尝试：

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

回答by ggradnig

You can link an image to a CSSclassby adding the class name inside the tag<img>

您可以CSS通过在标签内添加类名来将图像链接到类<img>

Working Example:

工作示例：

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

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