要跟隨響應背景圖像的位置圖標

我試圖構建一個網站，其中有一些房屋的響應背景圖像，並且我有一些位於某些房屋上方的位置圖標（例如google）。要跟隨響應背景圖像的位置圖標

無論如何，那些位置圖標是否可以沿着背景保持其位置在他們所在的某些房屋上方？謝謝。

這裏是爲響應背景圖像的代碼：

body { 
    background: url(../img/backgroundLarge.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;

位置圖標放在像這樣一個正常的IMG標籤和風格與填充了自己的立場：

<img src="img/locationIcon.png">

一些聰明的jQuery或者JavaScript可能？

謝謝。

來源

2014-07-02 Andrei P

你必須做一些猜測和檢查工作，找出身體的百分比寬度/高度，以便將你的圖標絕對定位在房屋上方 - 但是你可以使用CSS。

#someIcon { 
left:50%; 
top:30%; 
}

您可能需要在圖標圖像大小因素，以及 - 你可以通過猜測和檢查CSS做，直到它看起來不錯或計算保證金使用JavaScript來設置。

如果您的意思是「響應」，意思是圖像本身是動畫的（比如.GIF），那麼您將有更艱難的時間。您可以使用SVG Paths並使圖標動起來與您的背景一起移動，但是您也可以將運動部分從圖像中剝離並使用類似於Parallax的東西。

來源

2014-07-02 17:34:07

嗨，謝謝你的回答。通過響應式圖像我的意思是這是一個普通的jpg文件，它會自動調整大小以填滿整個屏幕。你認爲我在正確的軌道上，我也增加了位置：絕對;到目前爲止，我認爲它是有效的。我仍然認爲有更好的方法可以做到這一點 –

@Andrei P：如果你想出更好的答案，請隨時發佈你自己的答案。我希望有更好的答案，但如果你所做的只是縮小圖像，那麼百分比位置可能是你最好的選擇。 G'Luck。 –

「這不甚密切」 - 爲什麼不呢？它應該是不可知的決議。請解釋。 –

要跟隨響應背景圖像的位置圖標

回答

相關問題