CSS HTML修復父圖像中的某個點的div

我希望這是有道理的，但我有HTML代碼，我有一個孩子，這是一個SVG動畫，我想讓該部分響應，所以svg的位置停留在地圖上的位置。CSS HTML修復父圖像中的某個點的div

我選擇了非洲海岸作爲一個觀點，當頁面大小調整時，我希望SVG保持原位，但當它調整大小時，您會看到紅色標記在非洲其他地方移動。

您可以看到jsFiddle爲源代碼和see the result到完整的地圖。

.about-header__map .angola { 
    position: inherit; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
.about-header__map .angola svg { 
    top: 49%; 
    left: 42.5%; 
    position: absolute; 
}

來源

2014-09-04 ngplayground

使用的圖像的寬度（1440px）代替寬度：100％

.about-header__map { 
    background: url(http://i.imgur.com/ZqQvEUK.png) no-repeat center center !important; 
    width: 1440px; /*here */ 
    background-size: cover; 
    height: 500px; 
    position: absolute; 
    z-index: -1; 
}

FIDDLE

來源

2014-09-04 09:11:39 Danield

使用一個固定的寬度。約在-header__map

.about-header__map { 
background: url(http://i.imgur.com/ZqQvEUK.png) no-repeat center center !important; 
background-size: cover; 
height: 500px; 
position: absolute; 
width: 1500px; 
z-index: -1; 
}

來源

2014-09-04 09:15:53

CSS HTML修復父圖像中的某個點的div

回答

相關問題