Transparencia en DIVs HTML (Div Opacity) - WarNov Developer Evangelist - Site Home - MSDN Blogs

Transparencia en DIVs HTML (Div Opacity)

Transparencia en DIVs HTML (Div Opacity)

Rate This
  • Comments 2

Cada mes acostumbro a cambiar el header de mi Blog usando una fotografía tomada por mí.

Para este mes quise poner una foto del Palacio de Justicia ubicado en la Plaza de Bolívar en Bogotá.

En esta foto fue difícil ubicar el título de mi blog, dado los colores de fondo. Así que la alternativa fue ponerle un color de fondo sólido al título.

Sin embargo, un color sólido arruina la fotografía de fondo, pues no la deja ver para nada. Allí fue donde me nació la duda de cómo hacer un div transparente, para así poder modificar el estilo del blog.

Investigando un poco, encontré que esto se hace distinto para distintas versiones de navegador. En especial, para Firefox se usa:

opacity:0.6;

Luego vi que esto no funcionaba en IE, pues me seguían apareciendo los fondos sólidos.  así que investigando un poco, encontré que esto se hace distinto para IE:

filter:alpha(opacity=60);

De esta manera, un estilo escrito así:

#title {
opacity:0.6;
filter:alpha(opacity=60);
}

Produce este resultado independientemente del navegador:

image



Leave a Comment
  • Please add 2 and 1 and type the answer here:
  • Post
  • Buah tio perfecto ^^ Suerte que encontre tu post con la solucion a mi problema.

    Merci y buen aporte.

  • Con mucho gusto Rafa!

Page 1 of 1 (2 items)