html - 三个 div 内联，中间固定宽度水平居中

Question

我正在设计响应式网站，内容为 320 像素到最大 960 像素宽度水平居中的 div。现在我想做标题条，这是一个与屏幕宽度一样长的图像，在内容框中不受影响，但希望在这个 960px 条之外的其余部分被涂黑。这张图片将更好地解释它：

我一开始尝试做线性渐变，但我不知道断点的确切位置。我尝试了黑色、半透明的 div，但无法正确处理它们。

有什么方法可以用纯 css3 做到这一点，或者我必须使用 js/jquery？提前致谢。