Hola, yo otra vez:
Como este tema es uno de los más completos sobre fondos semi transparentes, sigo agregando ideas aquí. Esta no eso que se dice "brillante", pero ya tenía una imagen hecha y me daba lástima no postearla.
Más arriba hay varios ejemplos sobre semitransparencia degradada, pero falta el más obvio y recién me di cuenta cuando saltó el tema en
Degradado PNG sobre imagen de fondo en IE. Es usar una imagen (*.jpg; *.gif) que ya tenga un color fundido con el mosaico o color de fondo. Las limitaciones son enormes -empezando porque no se puede fijar el
background del documento si hay un diseño- así que dejo el código sin muchas esperanzas de que a alguien le sirvan.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>IMAGEN DEGRADADA. </title>
<script type="text/javascript">
var cambio = 1;
function cambiaColor (){
if(cambio == 1){
cambio = 0;
var colorAzar = "#" + ((Math.floor(Math.random()*4096)+4095).toString(16)).substring(1);
document.getElementById("pad").innerHTML = colorAzar;
document.getElementById("pad").style.backgroundColor = colorAzar;
setTimeout("cambio=1", 200)
}
}
</script>
<style type="text/css">
body{background-image:url("http://img43.imageshack.us/img43/9528/marmol2in.gif");}
table {border:8px inset silver;}
th{background-image:url("http://img386.imageshack.us/img386/1738/marmoldegrad3jx1.gif"); background-repeat:repeat-x; height:200px; width:200px; font-size:30px; border:8px outset silver;}
td {height:200px; width:200px; font-size:18px; border:8px outset silver;}
#pad {background:url("http://img43.imageshack.us/img43/7566/semitransmarmol5ba.gif") #fff; cursor:move; text-align:center; font:bold 30px monospace;}
</style>
</head>
<body>
<table>
<tbody><tr>
<th>FONDO</th><th>DEGRADÉ.</th>
</tr><tr>
<td><p>Moviendo el puntero sobre la celda derecha cambia el color del diseño de fondo.</p>
<p style="text-align:right; font:36px arial,'times new roman','courier new';">→ </p></td><td id="pad" onmousemove="cambiaColor()">MOVER AQUÍ</td>
</tbody>
</table>
<h2>Imágenes.</h2>
<img src= "http://img43.imageshack.us/img43/9528/marmol2in.gif
" border=1>
<img src= "http://img386.imageshack.us/img386/1738/marmoldegrad3jx1.gif" border=1>
<img src= "http://img43.imageshack.us/img43/7566/semitransmarmol5ba.gif" border=1>
</body>
</html>
Para compensar con un ejemplo tan pavo, agregué dos celdas con un efecto que muestra cómo cambiar el color de un diseño de fondo sin cambiar la imagen. El script es nada más que para generar colores aleatorios de la paleta de 4000; está claro que se puede hacer sólo con CSS.
Imágenes.
_ 
_