Illuminez une section d'un arrière-plan de page Web

Question

Existe-t-il un moyen d'avoir une superposition semi-transparente dans une page Web et d'éclaircir le contenu sous-jacent? Je veux avoir un contenu dynamique dans l'arrière-plan d'une superposition transparente avec une section surlignée plus claire que le reste de l'arrière-plan. Par exemple, dans la maquette ci-dessous, il y a un graphique en arrière-plan, recouvert d'une image noire foncée, qui à son tour est recouverte d'une couleur plus claire sur la droite.

alt text http://img197.imageshack.us/img197/5736/screenshot20091203at114.png

Une telle chose est possible en utilisant soit Javascript, CSS, HTML, PNG transparent, etc.? Edit: il existe peut-être un moyen d'utiliser l'opacité CSS pour avoir un calque noir partiellement transparent, recouvert d'un calque blanc partiellement transparent, donnant les nuances de gris, comme dans l'exemple d'image (merci pour les idées de tous) .

Answer 1

Vous pouvez capturer l'emplacement d'un objet DOM, récupérer sa taille et superposer un ensemble de DIV créant un «mur avec une fenêtre» pour votre zone «en surbrillance».

Answer 2

Vous pouvez utiliser un PNG transparent placé sur un autre fond pour obtenir cet effet:

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

Où solid.jpg est l'image d'arrière-plan non-transparent et white-50-percent-opacity.png est un PNG semi-transparent.

Answer 3

Cela est possible avec du code HTML pur + CSS de manière compatible avec plusieurs navigateurs. Vous n'avez pas besoin d'utiliser les PNG, il suffit de mettre un élément sur votre barre noire qui a un fond blanc et opacity: 0.5. Pour IE, fournissez également la variante filter: alpha(opacity=50).

Pour faciliter le positionnement, réglez la barre noire sur la position relative, puis positionnez absolument la couche blanche à l'intérieur.

Par exemple:

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

Et le 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); 
}