transparencia en ie8

AlvaroX · #1 (**permalink**) 05/11/2011, 20:34

hola a todos estoy complicadisimo con un efecto web, quiero transparentar texto pero en internet explorer 8 he tenido problemas, ya que al aplicar mediante javascript opacidad el texto se deforma hago algo asi

<b opacado="100" id="texto">hola</b>

y el javascript

function opacar(){
texto = document.getElementById("texto");
opa = parseInt(texto.getAttribute("opacado"))-10;
texto.style.filter="alpha(opacity="+opa+")";
texto.setAttribute("opacado", opa);
if(opa == 0){ clearInterval(opacalo); }
}

opacalo = setInterval("opacar()", 500);

algo asi tengo el problema esta en que la letra se deforma que puedo hacer?

emprear · #2 (**permalink**) 06/11/2011, 00:09

Usa esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Opacity Css</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
 
.prueba {
    background-color: #353535;
    width: 100%;
    color: #ffffff;
}
.capa_opaca1 {
    opacity: .7;
}
.capa_opaca2 {
    filter: alpha(opacity=70);
}
.capa_opaca3 {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
code {
    color: #000000;
}
/*]]>*/
</style>
</head>
<body>
<p class="prueba">Sin opacity</p>
<p class="prueba capa_opaca1">Aplicando <code>opacity</code> Ie9/Firefox/Opera/Chrome/Safari</p>
<p class="prueba capa_opaca2">Aplicando <code>filter</code> Ie7</p>
<p class="prueba capa_opaca3">Aplicando <code>-ms-filter</code> Ie8</p>
 
Para que trabaje en todos al mismo tiempo, aplicar condicionales de IE<br />
 
</body>
</html>

Saludos

AlvaroX · #3 (**permalink**) 06/11/2011, 11:06

en loo que me mostrarte si cambio el font-size a 24px se falla el texto sugerencias?

emprear · #4 (**permalink**) 06/11/2011, 11:21

Yo cambié esto

Código CSS:

Ver original.prueba {
    background-color: #353535;
    width: 100%;
    color: #ffffff;
}

x esto

Código CSS:

Ver original.prueba {
    background-color: #353535;
    width: 100%;
    color: #ffffff;
    font-size: 24px;
}

y se sigue viendo bien. Revisá como pusiste el tamaño de la fuente

Saludos

AlvaroX · #5 (**permalink**) 06/11/2011, 12:04

Cita:

Iniciado por emprear

Yo cambié esto

Código CSS:

Ver original.prueba {
    background-color: #353535;
    width: 100%;
    color: #ffffff;
}

x esto

Código CSS:

Ver original.prueba {
    background-color: #353535;
    width: 100%;
    color: #ffffff;
    font-size: 24px;
}

y se sigue viendo bien. Revisá como pusiste el tamaño de la fuente

Saludos

me salvaste el pellejo, ocupaba el background-color por defecto pensando que era blanco asi que puse background-color:000000; mas el width todo perfec

muchas gracias, solucionado