html - 在响应元素上响应地重新缩放和定位图像

Question

最佳描述问题的示例:

我有一张图片，我们称它为背景(例如蓝色)。在这个例子中图像是

• 2000 像素宽/1000 像素高
• 已设置 width: 100% 并将随浏览器窗口重新缩放。

我还有另一张图片，我们称它为绿色。这是一个正方形，它是

• 200px x 200px(宽度是背景大小的 10%)。

我想要实现的是，我希望绿色相应地重新缩放和重新定位并完全覆盖背景的粉红色目标位置，无论当前视口(viewport)宽度如何(在换句话说:它应该是“响应式的”)。

重新缩放部分很简单，只需将宽度设置为 10% 即可。定位是一个更难破解的螺母。据我所知，以下代码。当我使用 position: absolute 时，我将元素从它的自然流中移除，top: 40% 将是 40% of 0绿色方 block 将留在顶部。

相同的示例代码可用作 CodePen 以便于编辑:http://codepen.io/emiloberg/pen/vGdNaX?editors=1100#

这对于纯 CSS 来说是不可能的吗？如果没有，一种可能的解决方法是使用 svg 的 image 元素。

.wrapper {
  position: relative;
}

.bg {
  position: absolute;
  width: 100%;
}

.green {
  position: absolute;
  width: 10%;
  left: 60%;
  top: 40%; /* This isn't working */
}

<div class="wrapper">
  <img class="bg" src="https://dl.dropboxusercontent.com/u/3378286/solayout/bg.png">
  <img class="green" src="https://dl.dropboxusercontent.com/u/3378286/solayout/green.png">
</div>

(我很难为这个问题找到合适的标题。请随意编辑它)

Answer 1

解释:http://www.w3schools.com/css/css_positioning.asp

CSS:

.bg {
  position: relative;
  width: 100%;
}