div sin transparencia encima de div con transparencia

PablosckY · #1 (**permalink**) 23/05/2009, 15:58

a ver, explico brevemente la situacion. quiero crear un div con una transparencia y dentro otro div sin transparencia, pero no consigo que este ultimo no la tenga, parece que esta debajo de la transparencia (no se si sera que al estar dentro, coje las propiedades del div de fuera)

resumiendo, el div "menu" tiene transparencia, y quiero poner un div "fecha" completamente opaco encima , pero no se por que no me sale

el html seria asi

Código:

<div id="menu">

<div id="fecha"><p>18:56<br />22.mayo.2009</p></div>

<ul>

<li><img src="images/icons/home.png" /></li>

</ul>

</div>

y el css asi:

Código:

#menu{

height: 80px;
width:100%;
background-color:#000;
filter: Alpha(Opacity=0.65);
opacity: .65;
margin-top:10px;


}


#fecha{

border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
color:#fff;
height:60px;
width:200px;
background-color:#000;
margin-top:10px;
float:left;
text-align:center;
margin-left:15px;
}

a ver si alguien me ayuda plizz!

kseso? · #2 (**permalink**) 23/05/2009, 16:06

La transparencia se hereda, siempre y por todos los hijo y no se puede anular.

Busca en este foro de css, hay ejemplos ya hechos de lo siguiente:
Creas dos div´s hermanos, a uno le aplicas transparencia y al otro modificas su posición mediante css para posicionarlo sobre el anterior.

Un saludo, y bienvenido al FdW

PablosckY · #3 (**permalink**) 23/05/2009, 16:09

Cita:

Iniciado por kseso?

La transparencia se hereda, siempre y por todos los hijo y no se puede anular.

Busca en este foro de css, hay ejemplos ya hechos de lo siguiente:
Creas dos div´s hermanos, a uno le aplicas transparencia y al otro modificas su posición mediante css para posicionarlo sobre el anterior.

Un saludo, y bienvenido al FdW

nunca habria pensado que me responderian tan rapido jejeje.

pos vaya mi*rda que no se pueda anular :( buscare lo que me dices y lo hare :D gracias por la ayuda!

kseso? · #4 (**permalink**) 23/05/2009, 16:11

Aquí tienes un ejemplo de lo que te comentaba.

la rapided, nah... he sido bueno y me han dejado quedarme en casa esta noche

-Defero- · #5 (**permalink**) 23/05/2009, 19:33

¿Y no se podría poner "filter: Alpha(Opacity=1) a la segunda capa?

PablosckY · #6 (**permalink**) 24/05/2009, 05:14

Cita:

Iniciado por kseso?

Aquí tienes un ejemplo de lo que te comentaba.

gracias :D de todas formas lo pude solucionar con los datos que me diste jeje

Cita:

Iniciado por Defero.tk

¿Y no se podría poner "filter: Alpha(Opacity=1) a la segunda capa?

lo probe y tampoco valia, y cuando me dijeron que no se podia anular lo entendi :D

kseso? · #7 (**permalink**) 24/05/2009, 05:54

Cita:

Iniciado por Defero.tk

¿Y no se podría poner "filter: Alpha(Opacity=1) a la segunda capa?

Hola Defero.tk
Al heredarse, da lo mismo declarar un valor de 1 que no hacer nada, pues si el padre tiene un valor inferior a 1, el hijo podrá aumentar el grado de "transparencia" (hacerlo más próximo a 0), pero nunca disminuirla (hacerla más próxima a 1).
Al estar los valores admitidos en el rango [0 ··· 1]:
0.5 * 1= 0.5; 0.5 * 0= 0;
como ves, los únicos valores que puede tomar el hijo es el rango comprendido entre 0 y el valor de su padre.

Un saludo

PatomaS · #8 (**permalink**) 24/05/2009, 22:29

Hola

Hay un error conceptual importante aquí.

El color de fondo de un elemento HTML no es heredable, pueden revisarlo aquí.

Como ven, lo que ocurre, es que el valor por defecto de todos los elementos es transparent, por lo tanto, si aplican un color a un elemento y posicionan este sobre una capa con un color definido, el color del padre no afectará al hijo.

El párrafo anterior suena evidente, pero condeiren esto, si en su navegador cambian el color de fondo por defecto de las páginas y navegan a un sitio en el que no se han definido colores, verán las cosas con ese color de fondo. Lo que están viendo, es el color que el navegador asigna al elemento raíz, y a partir de ahí, los demás, siendo transparentes, parecen heredar la propiedad.

La respuesta correcta a la pregunta planteada, es que hay que definir un color de fondo a la capa que quiere que esté encima; los posibles valores son transparente (por defecto), un color o heredar el del padre. Como en este caso, lo que quiere no es heredar, automáticamente deja fuera dos de las tres opciones.

Felicidad

Mikmoro · #9 (**permalink**) 24/05/2009, 23:59

Creo que en realidad kseso? se refiere a opacidad, no a transparencia, que de hecho es el problema que está tratando según la consulta.

kseso? · #10 (**permalink**) 25/05/2009, 05:08

Efectivamente Mik.

Cuando Pablos habla de "transparencia" deja muy claro en su código a qué se refiere

Cita:

#menu{
height: 80px;
width:100%;
background-color:#000;
filter: Alpha(Opacity=0.65);
opacity: .65;
margin-top:10px;
}

PatomaS · #11 (**permalink**) 25/05/2009, 08:25

Hola

Bueno, está bien tratar de aclarar lo que alguien dice o quiso decir, sin embargo, la respuesta de kseso? es clara y contundente, "la transparencia se hereda", utiliza el conepto varias veces y no corrige el error, así que con perdón, pero sinceramente no creo que fuera un error de tipeo. Supongo que no hace falta que las cite en esta respuesta.

Por otro lado, yo llegué a este mensaje por casualidad, siguiendo el vínculo que un usuario puso en otro mensaje diciendo que aquí explcaban bien algo, y al llegar, encontré palabras autoritarias, equivocadas. Ya no es solo la modestia y coherencia de asumir un errorcillo, es asumir que otras personas leen lo que escribimos y si piensan que lo hacemos bien, pero estamos equivocados, ellos también caerán en el error; ese, es uno de los principales problemas con los foros.

Todos nos equivocamos. Si alguien usa un concepto mal y estamos claros en ello, hay que decirlo; si dicha persona lo usa mal y nosotros también ¿cómo aprende esa persona? ¿cómo sabe un tercero que en realidad si sabías la diferencia? ...

De paso, la opacidad tampoco es heredable.

¿Algún otro punto se me queda pendiente?.

Conste, kseso? que no es nada personal y como Mikmoro puede atestiguar, ms palabras a veces suenan duras, pero no tengo ninguna mala intención, solo aclarar un punto equivocado.

A fin de cuentas el problema de la persona se solucionó con la ayuda que le proporcinaste y eso es de mucho valor.

:)

Felicidad

Mikmoro · #12 (**permalink**) 25/05/2009, 09:59

Cita:

Iniciado por PatomaS

Conste, kseso? que no es nada personal y como Mikmoro puede atestiguar, ms palabras a veces suenan duras, pero no tengo ninguna mala intención, solo aclarar un punto equivocado.

A fin de cuentas el problema de la persona se solucionó con la ayuda que le proporcinaste y eso es de mucho valor.

Lo atestiguo

Creo que es evidente que el error está provicado por quien comenzó el hilo, ya que en el título cita ya transparencia cuando debería decir opacidad. Al fin y al cabo, la opacidad produce transparencia, por lo que los conceptos se mezclan a menudo.

La cuestión en este caso es que al margen de ser o no heredable, ya que la opacidad no es una propiedad CSS2, la opacidad produce el problema de que todo elemento colocado dentro de una caja con la opacidad modificada, se ve afectado por ésta, resultando imposible reestablecer una opacidad total para dicho elemento.
De esa manera, como comentaba kseso?, la única manera que he encontrado de resolver esto es colocando los elementos fuera y posicionándolos como si estuvieran dentro gracias a la propiedad position.

Nada, creo que para quien encuentre este hilo el asunto quedará más o menos aclarado.

kseso? · #13 (**permalink**) 25/05/2009, 10:36

Hola Patomas
Nah, no hay problema. Es símplemente exposición de puntos de vista diferentes.

Creo que el pretendido error viene de que se están mezclando lo que son las propiedades css (sus valores y características) al escribir código y algo totalmente distinto como es referirse a esas propiedades en un texto descriptivo de un problema con alguna de ellas.

Precisamente para evitar las interpretaciones erróneas de una exposición confusa por su mala descripción o el uso de palabras/expresiones polisémicas ("pluriconceptuales") es por lo que en este foro de css somos tan pesados pidiendo ver código.

Pero ciñéndonos al caso que nos ocupa, y dejando claro antes de nada la diferencia principal entre "transparent" y "opacity" (que seguro que conoces, pero para terceros):
"Opacity" es una propiedad que hay que definir exprésamente y que admite distintos valores.
"Transparent" es un valor que se puede asignar a algunas propiedades (como son fondos o bordes). Y es el valor por defecto de la propiedad background de todos los elementos menos del "body" como bien dices.

Después de esta larga introducción, vamos con la consulta en concreto de Pablos:
Creo que tu confusión nace del uso simultaneo que hace en su frase de las palabras "transparencia" y "opaco":

Cita:

resumiendo, el div "menu" tiene transparencia, y quiero poner un div "fecha" completamente opaco encima , pero no se por que no me sale

palabras que es muy común que aparezcan juntas al referirse a la propiedad "opacity" y no sólo en castellano:

Cita:

CSS3 Opacity:
Although, CSS opacity property has been around for while, When CSS3 rolls out there will be more use of the opacity property. You can set the transparency of box, image and text using the opacity property.
Fuente: http://www.noupe.com/

Otra más de flepstudio.org:

Cita:

Css3 opacity: transparency of an element in css:
The css3 property opacity allows to change the transparency of an element.
The property opacity needs a value in between 0.0 (equal to 100% transparency) and 1.0 (no transparency).
Example for a css transparency of 60%:

Código css:

Ver originalopacity: 0.6;

Así que como verás, Patomas, creo que no hay error en este caso. Pero en otros muchos (más de los deseables) sí los suelo cometer.

Todo lo anterior con la mejor de las intenciones, y como tú dices, intentando aclarar cuestiones. Y nada, no te preocupes, pues tanto el tono como tus palabras son totalmente correctas y respetuosas. Espero haber logrado trasmitirte lo mismo con las mías.

Un saludo, Patomas.

jomaruro · #14 (**permalink**) 25/05/2009, 14:29

Hola:

Da gusto leer conversaciones como estas, en la que personas que saben y entienden lo que hacen y aclarándose entre ellos los demás aprendemos.

Muchas gracias a los tres, me ha resultado muy productivo y a la vez entretenido.

Saludos.

mayid · #15 (**permalink**) 17/06/2009, 20:01

Chicos, encontre una manera luego de una tarde de trabajo:

Usar una venecita semi transparente.

Hice un .png con 20% de opacidad en photoshop, y lo puse como background image al div contenedor.

De esta manera el fondo es transparente y no hay herencia.

Lo van a poder ver durante unos dias aqui: libasoles.com.ar/wordpress
(usen la botonera please porque en la primera pagina no hay transparencias / opacidades)

kseso? · #16 (**permalink**) 18/06/2009, 03:42

Gracias mayid por descubrirnos la maravillosa y mágica existencia de los ¿.png?
¿qué serán?

n.t.j.

mayid · #17 (**permalink**) 18/06/2009, 07:37

ok. Anoche di información 'solo para entendidos'.

El formato .png es de graficos, al igual que el .jpg y el .gif

Por mas que este extendido el jpg, hay que saber que no acepta transparencia. El 'gif' si, y lo mismo el 'png' (siglas de 'portable network graphics').

La solucion que doy al tema de la ocidad viene a ser por ahora la mejor que se me ocurre para casos es que hay uso de textos, porque estuve viendo el ejemplo que se da aqui y en otros foros de suporponer dos capas relativas a traves de desplazamiento, y no funciona bien con el navegador Opera. Ahi el texto supuestamente blanco que se posiciona sobre una capa con opacidad, se ve negro.

kseso? · #18 (**permalink**) 18/06/2009, 07:56

Cita:

Iniciado por mayid

ok. Anoche di información 'solo para entendidos'.

No sabes cuánto se agradece que te apiades de los desentendidos
Oye, y eso de png ¿es nuevo? ¿Sabes si hay algún plugin para paint?

Cita:

Iniciado por mayid

La solucion que doy al tema de la ocidad viene a ser por ahora la mejor que se me ocurre para casos es que hay uso de textos, porque estuve viendo el ejemplo que se da aqui y en otros foros de suporponer dos capas relativas a traves de desplazamiento, y no funciona bien con el navegador Opera. Ahi el texto supuestamente blanco que se posiciona sobre una capa con opacidad, se ve negro.

Gracias otra vez por el aviso, veo que tendré que llamar a los de Opera. El mio debe funcionar mal:

Y ya para finalizar, si no es mucho pedirte, esa cosa de eso de los entendidos, el png, yo lo veo como muy feo en mi navegador ie6. ¿cómo hago?

Gracias Mayid

n.t.j.

-Defero- · #19 (**permalink**) 18/06/2009, 11:54

A mí me queda una duda. ¿Qué significa n.t.j.? ¿No Te Jode?

kseso? · #20 (**permalink**) 18/06/2009, 12:39

No Defero, no es mi estilo.

no tiene enjundia= "notienjundia" (coloquialmente)= no tiene mayor importancia, dicho de algo que no va más allá o no tiene mayor importancia.

¿O acaso en algún momento me has visto utilizar ese tipo de lenguaje en el foro? Creo que nunca, mas bien todo lo contrario, procuro añadir un toque de humor sea el tema que sea.

-Defero- · #21 (**permalink**) 18/06/2009, 13:54

Cita:

Iniciado por kseso?

No Defero, no es mi estilo.

Lo siento, aún no identifico tu estilo.

Cita:

no tiene enjundia= "notienjundia" (coloquialmente)= no tiene mayor importancia, dicho de algo que no va más allá o no tiene mayor importancia.

Estoy familiarizado con el término "enjundia". Pero entonces, ¿no sería "n.t.e" en vez de "n.t.j."? Bueno, supongo que te refieres a "No Tien Jundia". Será que "I.P." significa "Im Presionante".

Cita:

¿O acaso en algún momento me has visto utilizar ese tipo de lenguaje en el foro?

Creo que no, pero ya te digo, aún no identifico tu estilo.

Cita:

Creo que nunca, mas bien todo lo contrario, procuro añadir un toque de humor sea el tema que sea.

Hombre, "no te jode" tiene su pizca de humor.

sant3001 · #22 (**permalink**) 14/03/2012, 01:44

Se que el tema es muy antiguo pero ya que es la primera búsqueda que arroja google cuando tipeas "anular transparencia" y dado que nadie aportó con alguna solución real al problema, quise aportar con lo que encontré en un foro en inglés... esto me ayudó...

en vez de utilizar la propiedad:

Código:

opacity:0.6;

con css3 ahora se utiliza:

Código:

background-color:rgba(255,255,255,0.5);

y con eso haces tu fondo blanco transparente sin afectar nada más.

o si lo quieres en negro puedes probar con:

Código:

background-color:rgba(0,0,0,0.5);

Solo es cuestión de ir jugando con los cuatro valores. Los 3 primeros son las gamas de colores donde los valores permitidos son enteros entre 0 y 255 y el cuarto valor es la transparencia que puede estar entre los valores decimales de 0 a 1.

Espero esto ayude a alguien más.

Saludos

Darpsique · #23 (**permalink**) 01/04/2012, 22:29

Cita:

Iniciado por sant3001

Se que el tema es muy antiguo pero ya que es la primera búsqueda que arroja google cuando tipeas "anular transparencia" y dado que nadie aportó con alguna solución real al problema, quise aportar con lo que encontré en un foro en inglés... esto me ayudó...

en vez de utilizar la propiedad:

Código:

opacity:0.6;

con css3 ahora se utiliza:

Código:

background-color:rgba(255,255,255,0.5);

y con eso haces tu fondo blanco transparente sin afectar nada más.

o si lo quieres en negro puedes probar con:

Código:

background-color:rgba(0,0,0,0.5);

Solo es cuestión de ir jugando con los cuatro valores. Los 3 primeros son las gamas de colores donde los valores permitidos son enteros entre 0 y 255 y el cuarto valor es la transparencia que puede estar entre los valores decimales de 0 a 1.

Espero esto ayude a alguien más.

Saludos

Eres un CAPO! Gracias, me loggie solo para agradecerte, ahora me dieron ganas de estudiar ahora si, a fondo CSS3, saludos y nuevamente gracias!!!!!!!!!!

Speedbit · #24 (**permalink**) 03/10/2015, 03:43

Cita:

Iniciado por sant3001

Se que el tema es muy antiguo pero ya que es la primera búsqueda que arroja google cuando tipeas "anular transparencia" y dado que nadie aportó con alguna solución real al problema, quise aportar con lo que encontré en un foro en inglés... esto me ayudó...

en vez de utilizar la propiedad:

Código:

opacity:0.6;

con css3 ahora se utiliza:

Código:

background-color:rgba(255,255,255,0.5);

y con eso haces tu fondo blanco transparente sin afectar nada más.

o si lo quieres en negro puedes probar con:

Código:

background-color:rgba(0,0,0,0.5);

Solo es cuestión de ir jugando con los cuatro valores. Los 3 primeros son las gamas de colores donde los valores permitidos son enteros entre 0 y 255 y el cuarto valor es la transparencia que puede estar entre los valores decimales de 0 a 1.

Espero esto ayude a alguien más.

Saludos

SOS GROSSO, SABELO!!

parece que el que sabe... SABE y el que no, comenta en el foro por hacer sentir mal a los que saben menos que él... lamentable.

Gracias sant3001 por el SERIO Y CONCRETO aporte!