Question

我'，希望这是有道理的，但我有一个HTML代码，我有一个孩子，这是一个svg动画，我想让该部分响应，以便svg的位置保持在其意味着在地图。

我选择非洲海岸作为一个点，我希望在调整页面大小时保持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;
}

Answer 1

使用图像的宽度（1440像素）而不是宽度：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

Answer 2

在.about-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;
}

CSS HTML修复父图像中某个点的div

2 个答案: