rotación de divs problema con png transparente

juanlaborde · #1 (**permalink**) 04/02/2013, 16:06

Hola a todos, soy nuevo aquí, no hace mucho que uso css y tengo el siguiente problema:

Necesito rotar un div, he encontrado como hacerlo y funciona correctamente en todos los navegadores excepto en IE.
Aún no he probando en versiones anteriores pero en IE 9, si bien rota el div, muestra el fondo del png como negro y este es transparente.

He leído por ahí que IE tiene problemas con los PNG transparentes pero no encontré si hay alguna solución para esto.

Adjunto link para ver el problema en línea y mi código.

De antemano gracias a todos!!!

http://www.juanlaborde.com/rotacion/

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Rotación</title>

<style type="text/css">
body{
z-index:1;
background-color:#900;
margin:0;
font-family:Arial, Helvetica, sans-serif;
height:100%;
width:100%;
}

#cabecera_foto_user{
position:absolute;
z-index:5003;
width:74px;
height:74px;
top:2px;
left:16px;
-webkit-transform:rotate(-14deg); /* SAFARI & CRHOME ||| MAC desde: - hasta:6.0.2 & 24.0.1312.57 ||| PC desde: - hasta:5.1.7 & 24.0.1312.57 */
-moz-transform:rotate(-14deg); /* FIREFOX ||| MAC desde:18.0 - hasta: 18.01 ||| PC desde:18.0 - hasta: 18.1 */
-ms-transform:rotate(-14deg); /* IE ||| desde:9 - hasta:9 */
-o-transform:rotate(-14deg); /* OPERA ||| MAC desde: - hasta:12.12 ||| PC desde: - hasta:12.12 */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=-0.46); /* IE ||| desde: - hasta:8 */
background-color:#000;
}

#cabecera_polaroid_user{
position:absolute;
z-index:5002;
width:96px;
height:116px;
top:-8px;
left:11px;
-webkit-transform:rotate(-14deg);
-moz-transform:rotate(-14deg);
-ms-transform:rotate(-14deg);
-o-transform:rotate(-14deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=-0.46);
}
</style>

</head>
<body>
<div id="cabecera_foto_user"></div>
<div id="cabecera_polaroid_user"><img src="img/layout/cabecera_polaroid_user.png" width="96" height="116" /></div>

</body>
</html>

raexman · #2 (**permalink**) 04/02/2013, 23:11

Lo que pasa es que Internet Explorer tiene problemas procesando los PNG, por lo que a veces salen negros, como a veces si copias un PNG del navegador a Photoshop, se pasa con fondo negro en lugar de transparencia. Encontré esta posible solución, agrégaselo a tu código a ver si funciona. La explicación es: se forza a la imagen a un fondo color transparente y se usan los filtros de IE para que funcione.

Código HTML:

#cabecera_polaroid_user img
{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */
zoom: 1;
}