html - 图标在缩放(灵活)背景上的位置

Question

我正在为我的一个 friend 创建一个网站。 我们得到了这些布局，我已经放了一个灵活的背景，可以缩放到当前的浏览器大小。但是放置在背景上的图标需要在缩放窗口时保持相对位置。 意味着如果我调整窗口大小，让图标留在那个位置就可以了。

#icon1{

/*Back*/
position: relative;
//margin-top: 20%;
//margin-left:10%;
widht:20%;
top:20%;
z-index:10;     

html, body {height: 100%;
      //  width: 1600px;
        margin: 0 auto;
        overflow:hidden;
      }

#inhalt {height: 100%;
   //  width: 1500px;
     margin: 0 auto;
     background: url(wp-content/themes/html5blank-stable/img/bg_small.jpg);
      -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
     background-repeat: no-repeat;
     z-index:0;

Example

此时图标固定在它们的位置。

谢谢你的指点

Answer 1

根据@Paulie_D 的评论，我设法实现了这一点，我没有使用 map 的背景图像，而是使用了带有 img 标签的实际图像。通过使用实际图像，我将图标缩放到图像的大小(因为现在图像决定了容器的大小)。当我使用背景图片时，我必须手动设置容器的高度或宽度，这可能不是图片的实际大小。