Transparencia en fondo div

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.

esto se hace con png

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:



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

saludos

buen dato Maik!

el filter:alpha funciona tanto en explorer como en firefox... yo lo he utilizado

Código :

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

salu2

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.

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

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.

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.)

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

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

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

dimdaos escribió:

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.

Una solución es poner los enlaces en otro div y posicionarlo "arriba" del div con filtro de opacidad usando z-indez