P .- Como puedo poner un fondo degradado en una página.
R .- Poniendo mediante un script que en primer lugar averigue las dimensiones de la página, y luego inserte en una capa vacía una tabla vacía pero con el fondo de cada celda con distinto color.
Los tamaños de las celdas, se calculan a partir de los datos del tamaño de la página, y los colores se generan dinámicamente.
Ejemplo:
Código PHP:
<html>
<head>
<title>
Degradado
</title>
<script language=javascript>
function color(n) {
return "0123456789ABCDEF".charAt(parseInt(n / 16)) + "0123456789ABCDEF".charAt(parseInt(n % 16));
}
function ini() {
var elFondo = document.getElementById("fondo").style;
var ancho = document.body.clientWidth;
var alto = document.body.clientHeight;
elFondo.width = ancho;
elFondo.height = alto;
var altoCelda = alto / 256;
var tabla = "<table cellpadding=0 cellspacing=0 width=100% height=100%>";
for (var i = 255; i >= 0; i --)
tabla += "<tr><td width=100% height=" + altoCelda + " style='background-color: #FF" + color(i) + "00' ></td></tr>"
tabla += "</table>";
document.getElementById("fondo").innerHTML = tabla;
}
</script>
</head>
<body style="margin:0" onresize=ini() onload="ini()">
<div style="position: relative">
<div id=fondo style="position:absolute; top:0; left:0;"></div>
<div id=general style="position:absolute; top:0; left:0;">
<table border=1>
<tr>
<td >
Tabla sin importancia
</td></tr></table>
<div>
</div>
</body>
</html>
Para que funcione con otros colores y otro nº de pasos intermedios, se puede usar otra FAQ:
http://www.forosdelweb.com/showthrea...567#post903567
Y quedaría así:
Código:
<html>
<head>
<title>
Degradado
</title>
<script language=javascript src="gradientes.js">
</script>
<script language=javascript>
function ini() {
var colores = transitar("ff0000", "0000ff", 256);
var elFondo = document.getElementById("fondo").style;
var ancho = document.body.clientWidth;
var alto = document.body.clientHeight;
elFondo.width = ancho;
elFondo.height = alto;
var altoCelda = alto / 256;
var tabla = "<table cellpadding=0 cellspacing=0 width=100% height=100%>";
for (var i = 0; i < colores.length; i ++)
tabla += "<tr><td width=100% height=" + altoCelda + " style='background-color: " + colores[i] + "' ></td></tr>"
tabla += "</table>";
document.getElementById("fondo").innerHTML = tabla;
}
</script>
</head>
<body style="margin:0" onresize=ini() onload="ini()">
<div style="position: relative">
<div id=fondo style="position:absolute; top:0; left:0;"></div>
<div id=general style="position:absolute; top:0; left:0;">
<table border=1>
<tr>
<td >
Tabla sin importancia
</td></tr></table>
<div>
</div>
</body>
</html>
Notas: Deben indicarse los colores y el nº de pasos en la función transitar:
var colores = transitar("ff0000", "0000ff", 256);
Es preferible no usar un número de pasos muy grande para evitar una ralentización innecesaria.
