Is there a better way to achieve this with minimal performance hit and
maximal generalizability?
The answer to this is no.
The reason is that in order to do what you want you would need direct access to the bitmap used for the browser window to extract or manipulate the pixels in the area you want to blur (I wish, "aero" in a browser could look pretty neat..) or a filter that works on the elements behind the one you apply it to (or can have a limiting region set to it).
As there is no native support to do this (besides canvas and extension API, or a library that generate canvas image from the html -> relatively slow) this will need to be done with trickery (images, splitting divs etc.) in either case.
If you made everything in your page on a canvas you could do a lot of interesting things, but you would also need to perform layout, update, filtering etc. yourselves and therefor you would be back no non-optimized as Javascript is slower than native (not to mention it would be error prone).
Until browsers allow you to grab a section of the window as a canvas (never? as that would require everything on that page to be same-origin or have content with special accept headers set) there is no way around but to do tricks.
Update
As an demonstration that you can do it by using html2canvas etc, but having to use compromises (-> slow performance) - the demo is rough, experimental and needs tweaks to work well - but for the sake of demo only:
http://jsfiddle.net/AbdiasSoftware/RCaLR/
Result:
Generalized function to grab part of background:
getBlurredBG(x, y, width, height, id);
Get part of window using html2canvas:
function getBlurredBG(x, y, w, h, id) {
html2canvas(document.body, {
onrendered: function (canvas) {
process(canvas, x, y, w, h, id);
},
width: (x + w),
height: (y + h)
});
}
Process the content:
function process(canvas, x, y, w, h, id) {
//create new canvas to enable clipping
//As html2canvas returns a canvas from 0,0 to width and height
//we need to clip it.
var ocanvas = document.createElement('canvas');
ocanvas.width = w;
ocanvas.height = h;
ocanvas.style.left = x + 'px';
ocanvas.style.top = y + 'px';
ocanvas.style.position = 'absolute';
ocanvas.id = id;
var ctx = ocanvas.getContext('2d');
ctx.drawImage(canvas, x, y, w, h,
0, 0, w, h);
stackBlurCanvasRGB(ocanvas, x, y, w, h, 28)
lighten(ocanvas);
ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.fillRect(x, y, w, h);
ctx.fillStyle = '#999';
ctx.font = '32px arial';
ctx.fillText("Partial overlay content", 10, 60);
document.body.appendChild(ocanvas);
}
