更新
调整宽度以使框保持在不透明背景的位置
您可以将背景图像直接设置为元素并定义background-widthset 以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%;
}
（图像在这里分开的唯一原因是允许子元素具有不同的不透明度。）
附加提示：如果您需要相对于设备屏幕具有不同的字体大小，您可以覆盖font-sizeusing@media查询。
JavaScript：
我们需要一个带有 JavaScript 的小片段来计算与图像/背景宽度相比的宽度比。
然后，这个比率用于zoom我们设置的 CSS 规则的属性，因为这将缩放父级和其中的所有内容（对于 Firefox，我们需要使用transform:scale(f)，但是这有问题，因为它似乎与当前背景宽度一起累积）。
/// 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);
}
在线演示（适用于 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';
在线演示在这里
注意：为此，您需要满足 CORS 要求（跨域资源共享）。这意味着图像是从某个来源（域、路径）加载的 - 或者 - 如果从服务器允许跨域共享的另一个来源加载。
您可以在小提琴演示中看到您提供的原始图像链接不适用于这种方法，因此我将图像移至允许跨域共享的imgur.com并且它可以工作。
