Comunidad de diseño web y desarrollo en internet online

Transparencia en fondo div

Citar            
MensajeEscrito el 16 Mar 2006 04:13 am
Quisiera saber como podria hacer para ponerle a un fondo de un div una transparencia de tal manera que se vea lo que hay debajo. He econtrado una solucion filter:alpha pero esta me a funcionado soo en ie.

Por gparis

112 de clabLevel



 

Uruguay

opera
Citar            
MensajeEscrito el 16 Mar 2006 05:12 am
esto se hace con png

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 16 Mar 2006 06:36 am
Es algo que me enseño Freddie® hace poco, hay que hacer dos css distintos, el que se le aplicará a toda la página y otro para el hack de IE:

<!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=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="/estilos/styles.css" />
<title>{TITLE}</title>

</head>

<body>
<!--[if gte IE 5.5000]>
<link href="/estilos/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

<div id="container">
</div>
</body>
</html


el codigo que esta rojo dentro de body es el que carga la hoja de estilo para ie solamente ;)

en styles.css

Código :

#container{
   margin:0;
   padding:1px 20px;
   line-height:150%;
        width:472px;
   background-image:url(/imagenes/content.png);
   background-repeat:repeat-y;
}


en ie.css

Código :

#container{
   margin:0;
   padding:1 20;
   width:472;
   height:1;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/imagenes/content.png', sizingMethod='scale');
}


dos cosas:
  • si la imagen es completa, es decir, no aplicas repeat, en sizinMethod debes poner 'image' en vez de 'scale'
  • Solo he conseguido aplicarlo a id y clase unicamente, es decir, elementos anidados no me ha funcionado, es decir para algo como: #container li a{} , no lo he podido hacer directamente, si hay una forma por favor avisenme :P


saludos

Por Maikel

BOFH

5575 de clabLevel

22 tutoriales
5 articulos

Genero:Masculino   Team Cristalab

Claber de baja indefinida

firefox
Citar            
MensajeEscrito el 16 Mar 2006 06:40 am
buen dato Maik! ^^

Por Mariux

BOFH

7756 de clabLevel

28 tutoriales
15 articulos

Genero:Femenino   Héroes Editores

Diseñadora & ilustradora

firefox
Citar            
MensajeEscrito el 16 Mar 2006 06:07 pm
el filter:alpha funciona tanto en explorer como en firefox... yo lo he utilizado

Código :


.clase{
    opacity: .5;
    filter: alpha(opacity=50);
}



salu2

Por 3w

145 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 16 Mar 2006 10:54 pm
Existen CSS privativos para agregar transparencias, y además existe la regla de transparencia de CSS3. Esto hará que todo el div, incluyendo su texto se vea transparente.

Mientras que usando un PNG de 32bit con transparencia, lograremos un efecto de fondo transparente y texto normal. Cuestión de ver qué necesitas, pero prefiero los PNGs.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 29 Jun 2006 05:30 am
Yo tengo otro problema, y es que cuando transparento el div tambien se transparenta el color de fondo que le pongo al body, ¿alguna solución?

background-image: url(blanco.gif);
filter: alpha(opacity=80); <- IE
opacity: .8; <- FF
-moz-opacity: 0.8; <- Mozilla

¿Si me exlico o no?
A ver. Tengo una imágen de fondo en el body, pero la tengo top right, y como no rellena toda la página completo el color con hexadecimal, entonces ya no se ve donde empieza y donde termina la imágen de fondo (<- hasta aquí bien).
Luego, tengo un div que quiero transparentar, pero al hacerle la transparencia también se transparenta el color de fondo del body quedando más claro, "no se transparenta la imágen de fono del body sino el hexadecimal", y como queda más claro entonces si se distingue donde ampieza-termina mi bg-image y se ve muy feo.

Código :

body {
   color: #000000;
   
   background-color: #E0CCE0;
   background-image: url(fondo.jpg);
   background-position: top right;
   background-repeat: no-repeat;
}
div#principal{
   background-color: #ffffff;
   filter: alpha(opacity=80);
   opacity: .8;
   -moz-opacity: 0.8;
   position: absolute;
   padding: 5px;
   top: 40px; 
   right: 3px;
   color: black;
   font-family: verdana, tahoma, arial;
   font-size: 10px;
   border-top: 2px dotted #E0CCE0;
   width: 500px;
   margin-top: 120px;
   margin-right: 10px
}


Échenme una manita plis que se ve muy fea mi web.

Así se pone cuando le dejo transparencia al div: http://img226.imageshack.us/img226/5884/miweb4hz.png

Por PhenfiX

9 de clabLevel



 

firefox
Citar            
MensajeEscrito el 29 Jun 2006 06:50 am
Creo que mejor nos das la URL de la página montada en un servidor, porque sino no hay mucho que se pueda hacer, quizás el color de fondo o algo.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 29 Jun 2006 11:19 am
No es tan dificil, hay varias formas:
La primera es a través de código, personalmente no me suele gustar, ya que también se transparenta el texto que haya dentro de la div, los bordes, y todo lo que haya dentro...
Además no funciona en opera.

Código :

      -moz-opacity: 0.85;
      opacity: 0.85;
      filter: alpha(opacity=85);


La segunda es la IE, la desechamos por no ser estándar y obligar a programar 2 veces la misma cosa.

La tercera es la más simple, imagen PNG 8 con transparencia de alpha

En este link os he dejado un ejemplo de la transparencia que se forma en png8 y png24, el problema es que png24 no lo soporta IE, entonces debes trabajar con png8, de modo que al optimizar, en la opción de color "mate" debes poner el color de tu background, o uno similar, en caso de ser irregular. (Fíjate que la parte que cubre de la imágen de fondo queda horroroso, sin embargo la parte que cubre del color del body queda bien.)

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

  Héroes

firefox
Citar            
MensajeEscrito el 29 Jun 2006 05:25 pm
Gracias.

Al final opté por usar un PNG de 8 bits con 70% de transparencia (¿por qué no se me ocurrió antes?), y me quedó bien, o al menos como lo esperaba :D

Aquí esta el shot: http://img165.imageshack.us/img165/9284/miweb9xl.png

Y dejo el PNG de 100x100 para futuras referencias: bastante liviano, solo 230 bytes.



Creo que es más recomendable esta opción, ya que como mencionaban, no transparenta el texto.

Cuando termine de desarrollar mi web la subo para pedir sus opiniones, aunque creo va a estar un poco tardado por que la estoy haciendo en el Notepad++ (muy bueno)

Saludos

Por PhenfiX

9 de clabLevel



 

firefox
Citar            
MensajeEscrito el 11 Abr 2007 11:06 pm
UtiliC la opcion filter que se propone para explorer, pero como es habitual funciona pero a medias….resulta que ustilizo este filtro parara cargar un background con png transparente a una celda especifica, dentro de esta celda tengo una serie de links….pero quedan totalmente desabilitados.
saco ese filtro y funciona, pongo el filtro y no funciona…alguien sabe algo???



laopcion filter ALFA, e igual ya que si lo coloco todo el contenido que esta dentro queda con el filtro y no puedo hacer que el contenido no quede en alfa



GRACIAS :twisted:

Por dimdaos

5 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 12 Abr 2007 07:07 pm

dimdaos escribió:

dentro de esta celda tengo una serie de links….pero quedan totalmente desabilitados.
saco ese filtro y funciona, pongo el filtro y no funciona…alguien sabe algo???

Claro, cuando uno agrega este hack, no puede agregar links dentro del elemento o sino dichos elementos no siempre podrán funcionar como deben, por ejemplo enlaces.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 27 Jun 2007 05:37 am
Una solución es poner los enlaces en otro div y posicionarlo "arriba" del div con filtro de opacidad usando z-indez

Por buzu

163 de clabLevel



 

Los Angeles, California

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.