Украсить раздел фона веб-страницы

Question

Есть ли способ иметь полупрозрачное наложение на веб-странице и украсит основной контент? Я хочу иметь динамическое содержимое на фоне прозрачного наложения с одним участком, выделенным ярче, чем остальная часть фона.

Например, в макете ниже есть график на заднем плане, наложенный темно-черным изображением, который, в свою очередь, наложен более светлым цветом справа.

альтернативный текст http://img197.imageshack.us/img197/5736/screenshot20091203at114.png

Возможна ли такая вещь с использованием Javascript, CSS, HTML, прозрачных PNG и т. Д .?

Редактировать: возможно, есть способ использовать непрозрачность CSS, чтобы иметь частично прозрачный черный слой, наложенный частично прозрачным белым слоем, давая оттенки серого, как в примере изображения (спасибо всем за идеи).

Answer 1

Вы можете использовать прозрачный PNG поверх другого фона, чтобы получить этот эффект:

<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>

Где solid.jpg - непрозрачное фоновое изображение, а white-50-percent-opacity.png - полупрозрачный PNG.

Answer 2

Это возможно с чистым HTML + CSS относительно кросс-браузерно-совместимым способом. Вам не нужно использовать PNG, просто поместите элемент на черную полосу с белым фоном и opacity: 0.5. Для IE укажите также вариант filter: alpha(opacity=50).

Чтобы упростить позиционирование, установите черную полосу в положение относительное, а затем обязательно расположите белое наложение внутри.

Например:

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

И 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);
}

Answer 3

Вы можете зафиксировать местоположение объекта DOM, получить его размер и наложить набор DIV, создав «стену с окном» для вашей «выделенной» области.