如何使用CSS在div中移動圖像？

我有一個圖像位於一個div內，我試圖將它向下移動50 px，剩下50 px以便完成所有任務。但我不知道如何編輯CSS中的圖像，因爲我不知道要將照片連接到CSS的代碼是什麼。如何使用CSS在div中移動圖像？

我的代碼：

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

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

感謝您的幫助

來源

2016-12-05 Sid

根據衆多答案，在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。

來源

2016-12-05 12:11:36 AndFisher

可以SimPy中使用填充做到這一點

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

來源

2016-12-05 11:13:17

從聲明中刪除圖片名稱，使確保您的容器設置爲position: relative讓你的形象在這種情況下#OverviewText4

#OverviewText4 { 
    position: relative; 
} 

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

來源

2016-12-05 11:13:42 elmarko

這與任何時候使用位置的答案有關：絕對，良好的做法是使用位置：相對於父母..暱稱伴侶！ –

絕對定位對含右元素，如果我理解你的問題正確所有你需要做的就是這種風格添加到您的DIV在圖像的位置。

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

來源

2016-12-05 11:14:12 weinde

div不是一個類，所以你不能寫「.div> img」，但「div> img」 – ElChupacabra

@ElChupacabra對不起我的壞...錯字 – weinde

@ElChupacabra已經修復了我的回答 – weinde

使用margin屬性在元素周圍創建邊距。您也可以在div元素上使用padding。

試試這樣說：

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

來源

2016-12-05 11:14:21 ggradnig

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

來源

2016-12-05 11:14:39

您可以將圖像通過添加類名稱，在標籤內鏈接到CSS類<img>

工作實例：

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

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

來源

2016-12-05 11:15:17

對，你的CSS很好，但你的選擇器不是。我認爲這是你的目標。

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

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

我已經改變了img:MoneyIcon.png（這並不意味着什麼CSS）來img[src="MoneyIcon.png"]這意味着img標籤，其中src = MoneyIcon。PNG

這裏的主要問題是，如果你改變你也必須改變你的CSS中的src，我建議有一個這樣的類：

#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>

我希望你能找到這很有幫助。

來源

2016-12-05 11:20:06

這是正確的，但不建議在圖像或文件名/位置需要改變的情況下。值得注意。 – AndFisher

@AndFisher我補充了一點，謝謝 –

如何使用CSS在div中移動圖像？

回答

相關問題