Question

我正在为我的一个朋友创建一个网站。我们得到了这些布局，并且我提供了灵活的背景，可以扩展到当前的浏览器大小。但放在背景上的图标需要在缩放窗口时保持相对位置。意味着如果我调整窗口大小，那么将图标保留在那里就可以了。

#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的评论，我设法通过使用带有img标签的实际图像而不是对地图使用背景图像来实现此目的。通过使用实际图像，我将图标缩放为图像的大小（因为现在图像确定了容器的大小）。使用背景图片时，我必须手动设置容器的高度或宽度，而这可能不是图片的实际尺寸。

图标在缩放（灵活）背景上的位置

1 个答案: