如何將div元素定位到背景上的精確點

我正在尋找解決方案如何將div定位到背景上的精確位置。我有一個背景圖片（http://www.jewelryplatform.com/coming-soon.jpg），我需要將整個div放在圖片的中心位置，您可以在其中看到相應的框。第二個問題，圖像將與Windows大小調整大小。有沒有簡單的方法如何做到這一點？如何將div元素定位到背景上的精確點

來源

2014-01-17 martin.malek

請爲此佈局顯示相關的HTML + CCS。 – Teemu

這是可能的使用百分比。您可以將背景寬度設置爲100％，然後使用百分比將div對中。 – SkyOut

@Teemu：到目前爲止，HTML位於http://www.jewelryplatform.com/網站上。 –

你對CSS和媒體查詢有很多經驗嗎？

您可以在您的css中添加斷點，然後爲該斷點處的元素指定特定的樣式。

#formDiv{ position: absolute; left 50%; top:50%} 
@media only screen and (max-width: 995px) { 
    #formDiv{ position: absolute; left 25%; top:25%} 
}

來源

2014-01-17 18:04:04

我無法用百分數來做。我必須爲不同的決議做。所以這解決了我的問題。 –

我創建了一個fiddle，將保持在形式一個div的中心。

關鍵是要做的left: 50%爲中心它的形式，然後負邊緣 - 左半邊的寬度，以保持中心。這同樣適用於top: 50%。因爲所有內容都使用百分比進行定位，所以在調整框的大小時它會移動。

如前面的回覆中所述，您還可以使用媒體查詢以不同分辨率調整表單的大小。

UPDATE

您也可以考慮調整背景圖像屏幕尺寸的變化時。這可以通過再次100％設置background-size屬性來實現。 Here是如何使用它的好資源

來源

2014-01-17 18:11:27 SkyOut

如何將div元素定位到背景上的精確點

回答

相關問題