Duda con Opacity

[NestorCss]

Buenos días,

Mi duda es acerca del Opacity le he puesto una opacidad de 0.7em a un div con color blanco para ver el background que hay detrás pero luego el contenido del mismo div, me gustaría que fueran opacos, osea que no fueran transparente como el div. He intentado ponerle Opacity="100%" por si se podía hacer opacos los elementos pero no sé como puedo hacerlo, los elementos son div que contienen imagenes y un texto, 1 div con dos imagenes, otro con una imagen y otro con un texo.

¿Cómo podría hacer para ponerlos opaco?

[serenhopy]

Tienes que poner otro div sin fondo (de las mismas medidas y las mismas propiedades a excepción del fondo) dentro del div que tiene "opacity: 0.7", y poner el contenido que quieres que se vea opaco dentro de este div.
La otra opción es hacer una imagen con poca opacidad y guardarla en un formato que conserve la transparencia (por ejemplo .png o .gif).
Si de fondo del div tienes un color, eso de la imagen no te lo recomiendo, pero si tienes una imagen, si, pues esa misma imagen le pones menos opacidad y la guardas en .png.

Espero haberte ayudado!

[pzin]

Cualquier elemento que pongas dentro de ese, heredará la opacidad.

La solución más común y más actual, es no usar opacity y usar un color de fondo transparent, usando rgba() que contiene un canal alfa, el cual no se heredará lógicamente.

Código CSS:

div {
  background-color: rgba(0,100,0,0.5);
}
 

[NestorCss]

Iniciado por serenhopy

Tienes que poner otro div sin fondo (de las mismas medidas y las mismas propiedades a excepción del fondo) dentro del div que tiene "opacity: 0.7", y poner el contenido que quieres que se vea opaco dentro de este div.
La otra opción es hacer una imagen con poca opacidad y guardarla en un formato que conserve la transparencia (por ejemplo .png o .gif).
Si de fondo del div tienes un color, eso de la imagen no te lo recomiendo, pero si tienes una imagen, si, pues esa misma imagen le pones menos opacidad y la guardas en .png.

Espero haberte ayudado!

Gracias serenhopy por responderme, el fondo esta en body, pero el fondo que tiene el div que tiene opacity es de color blanco. Hice la primera opción que me comentaste pero no me ha funcionado y lo de la imagen con poca opacidad, si la pusiera no se quedaría igual el background del body. Asi que ya no se ni que hacer xDD.


EDITO:

Iniciado por Bonez

Cualquier elemento que pongas dentro de ese, heredará la opacidad.

La solución más común y más actual, es no usar opacity y usar un color de fondo transparent, usando rgba() que contiene un canal alfa, el cual no se heredará lógicamente.

Código CSS:

div {
  background-color: rgba(0,100,0,0.5);
}
 

Con esta opción si se quito pero el único problema es que el fondo del div y el fondo del body se fusionaron, osea que no se ve realmente blanco, ahora se ve verde jajajaja! pero transparente.

Saludos!

[pzin]

rgba()