我有一个网页，其背景图像为背景大小：封面。 现在我想用某些包含附加信息的 div's 覆盖这个背景图像。即使我调整浏览器窗口的大小，这些 div's 也必须位于相对于背景图像的精确位置。
这只是一次失败的尝试。
HTML
<body>
<div class="icon">
<div class="background picture_rendering"></div>
</body>
CSS
.background {
width:100%;
height:100%;
background-image: url(images/bg.jpg);
background-size: cover;
z-index: 0;
position: absolute;
}
.icon {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: relative;
background-image: url('/images/icon.jpg');
background-size: 5% auto;
background-position: 227px center;
background-attachment: fixed;
}
它应该类似于地图标签：http://www.w3schools.com/tags/tag_map.asp但是应该用图标代替链接。 我希望你理解:-)
最诚挚的问候， 那个人
基本上，您可以创建一个具有背景图像的父元素或包装元素，然后将所有元素（如图标等）放入其中并进行所有定位等。所以我为您创建了这个：
CSS
.container {
background: url(http://www.w3schools.com/tags/planets.gif) no-repeat;
width: 145px;
height: 126px;
position: relative;
}
.icon {
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
z-index: 2;
}
.icon1 {
background: green;
top: 20%;
right: 10%;
}
.icon2 {
background: red;
bottom: 10%;
left: 10%;
}
HTML
<div class="container">
<div class="icon icon1"></div>
<div class="icon icon2"></div>
</div>
这是 jsFiddle 的示例 http://jsfiddle.net/j5cgt22z/
因此每个图标都位于容器内，行星需要使用
position:absoluteposition:relative然后，您可以在每个位置上使用 z-index：绝对图标来堆叠每个图标，以便 z-index 越高，堆叠越高。
希望这有帮助
意识到问题还没有通用的解决方案。 （对象拟合并未得到广泛支持）。 我使用了 jquery-Plugin imagefill.js.
CSS
.background {
width:100%;
height:100%;
top: 0;
left: 0;
background-image: url(http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg);
background-size: cover;
z-index: 0;
position: absolute;
background-position: center center;
}
.container_icons
{
position: absolute;
height: 100%;
width: 100%;
}
.test
{
position: absolute;
background-image: url('http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png');
background-size: 70px auto;
background-repeat: no-repeat;
background-position: 17% 49%;
}
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/2.1.0/jquery.imagesloaded.min.js"></script>
<script src="http://johnpolacek.github.io/imagefill.js/js/jquery-imagefill.js"></script>
<div class="background"></div>
<div class="container_icons"><img class="test" src="http://upload.wikimedia.org/wikipedia/commons/8/8c/Transparent.png" width="3869px" height="2574px" /></div>
<script>
$('.container_icons').imagefill();
</script>
这是一个 jsfiddle --> 它的效果不如我的网页上的好;-)
只需使用高度和宽度值进行一些计算并尝试运算符，例如：
.icon {
position: absolute;
left: 50%; // can do same calc there
top: calc(50vh + 50vw / 5); // Calculate pos height + width / ratio
transform: translate(-50%, -50%);
}