更新
调整大小宽度保持盒子就位与不透明的背景
您可以直接设置背景图片的元素，并定义background-width设置为cover让图像按比例覆盖背景。
但是，这不会投射固定在某个位置的任何子元素。
此外 - 不能为背景图像设置单独的不透明度。需要将其设置在图像所附的元素上，这意味着它也会影响子元素。
为了解决这个一个可以：
- 编辑图像本身和保存出具有所需不透明度PNG。
- 可以使用画布修改不透明度（请参阅下面的解决方案）
- 或者可以使用图像元素作为该元素的子元素。后者对于这种情况足够有效（并且比使用画布更有效）。
这是一个简单但有效的解决方案（Firefox中存在问题，因为此浏览器目前不支持必需的CSS属性，但提供了一个可能的选项）。
HTML：
的HTML代码的小重结构：
<div id="container">
<img src="http://kpv.s3.amazonaws.com/static/img/film.jpg" width="794" height="477" />
<div class="box-message flow_one">Ipsum lorem dummy text.
<br>Ipsum lorem dummy text.
<br>Ipsum lorem dummy text.
<br>
</div>
<div class="box-message flow_two">Ipsum lorem dummy text.
<br>Ipsum lorem dummy text.
<br>Ipsum lorem dummy text.
<br>
</div>
</div>
CSS：
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
/* Important: use fixed width/height for container */
#container {
position:relative;
width:794;
height:477;
}
/* Let image follow width 100% and height auto-adjusted */
#container > img {
width:100%;
height:auto;
opacity:0.5;
}
.box-message {
position:absolute;
border:2px solid #000;
border-radius:7px;
background:rgba(255, 255, 255, 0.85);
padding:7px;
}
.flow_one {
left:12%;
top:10%;
}
.flow_two {
left:50%;
top:42%;
}
（为什么图象是单独在这里的唯一原因是为儿童元素提供不同的不透明度。）
附加提示：如果您需要使用与设备屏幕相关的不同字体大小，则可以使用@media查询覆盖font-size。
的JavaScript：
我们需要一个小片段用JavaScript相比图像/背景宽度来计算宽比。
该比率则用于zoom属性，我们设定的方案，因为这将扩大在它（为Firefox，我们需要使用transform:scale(f)父母和一切的CSS规则，但是这有问题，因为它似乎与当前的积累背景宽度）。
/// init parent element at load
redraw();
/// call everytime we resize
window.onresize = redraw;
/// calc ratio for zoom
function redraw() {
/// ratio f = window width/background width (hard-coded for demo)
var f = window.innerWidth/794;
//FF: container.style.transform = 'scale(' + f + ')';
container.style.zoom = f.toFixed(2);
}
ONLINE DEMO HERE（Chrome和其他浏览器支持CSS zoom）
更新2
由于无论你如何扭曲和转动的东西，你会遇到兼容性问题，这种方法以及CSS方法。一个浏览器支持一件事，另一个浏览器支持另一件事但不是第一件等等，他们还没有。
更坚实的方法（远离旧的IE浏览器）是使用纯JavaScript或诸如jQuery的包装来执行元素的位置，大小，字体等的手动计算。
一个可以通过测试像这样的检查，如果浏览器是能够使用例如变焦功能：
if (typeof container.style.zoom === 'undefined') {
/// manually calculate relations
} else {
container.style.zoom = factor;
}
当然，计算部分是不是作为需要通过元件进行迭代这里示出和比较繁琐以适合您的最终解决方案的方式如此。
不透明度
如果单独的图像元件也没有背景图像（预先定义的不透明度）是一个选项，然后这个解决方案提供了该选项。请注意，在调整大小的情况下，这不是非常有效，但可以作为最后解决方案。
下面是使用帆布一个例子：
var img = document.createElement('img'),
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
opacity = 0.5;
/// when image has loaded and a resize event occured
img.onload = window.onresize = draw;
/// resize canvas and draw image at given opacity
function draw() {
/// set canvas = window client size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
/// set opacity of canvas
ctx.globalAlpha = opacity;
/// draw image to canvas size
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
/// set background to resized image
container.style.background = 'url(' + canvas.toDataURL() + ') no-repeat left top';
}
/// request cross-origin sharing (if different domain than page)
img.crossOrigin = 'anonymous';
/// set image source and start loading image
img.src = 'http://i.imgur.com/Y77lhhL.jpg';
ONLINE DEMO HERE
注：对于这个工作，你需要满足的要求CORS（跨域资源共享）。这意味着图像是从某个原点（域，路径）加载 - 或者 - 如果从服务器允许跨源共享的另一个原点加载。
你可以看到小提琴演示，你提供的原始图像链接将无法使用这种方法，所以我将图像移动到imgur.com，它允许跨源共享，它的工作原理。
你应该知道已经jsFiddle会让我们更容易地帮你 – Itay
jsfiddle添加！ http://jsfiddle.net/zd3CA/ – Kiarash
你会遇到一团糟，试图用CSS来做到这一切。你最好的选择是在使用jquery调整屏幕大小时设置框的宽度/高度/边距。如果你想用CSS来做所有事情，你的盒子缺少宽度：x％。你可以做margin-top：x％;等等，但它会很难让它看起来像你的例子和缩放比例，你希望得到的结果与CSS单独 – Frank