Brighten a section of a webpage background

Question

Is there any way to have a semi-transparent overlay in a webpage and will brighten the underlying content? I'm wanting to have a dynamic content in the background of a transparent overlay with one section highlighted in a brighter than the rest of the background.

For example, in the mock-up below there is a graph in the background, overlaid by a dark black image, which, in turn, is overlaid by a lighter color on the right.

Is such a thing possible using either Javascript, CSS, HTML, transparent PNGs, etc.?

Edit: maybe there is a way to use CSS opacity to have a partially transparent black layer, overlaid by a partially transparent white layer, giving the shades of grey, as in the example image (thanks for everyone's ideas so far).

Answer 1

You could capture the location of a DOM object, retrieve its size and overlay a set of DIVs creating a 'wall with a window' for your 'highlighted' area.

Answer 2

You can use a transparent PNG atop another background to get this effect:

<div style="float: left; background-image:url(solid.jpg); width: 100%;">
 <div style="width: 300px; background-image:url(white-50-percent-opacity.png);">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo . . .
 </div>
</div>

Where solid.jpg is non-transparent background image and white-50-percent-opacity.png is a semi-transparent PNG.

Answer 3

That's possible with pure HTML + CSS in an relatively cross browser compatible way. You don't need to use PNG's, just put an element over your black bar which has white background and opacity: 0.5. For IE, supply also the filter: alpha(opacity=50) variant.

To easen up the positioning, set the black bar to position relative and then absolutely position the white overlay inside.

For example:

<label><span style="left: 50px; width: 100px;"></span></label>

And the CSS:

label {
    background: #000;
    width: 150px;
    height: 20px;
    display: block;
    position: relative;
}

span {
    display: block;
    height: 20px;
    position: absolute;
    background: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
}