Abuelo, padre e hijo. Comandos CSS

Buenas a todos:

Tengo cierta duda que he estado intentado solucionar por internet pero sin exito. Estoy creando una web para reformar la antigua, esta nueva web va a tener un fondo en el body de color negro, un div que ocupa casi toda la página (como si fuese un segundo body) con una imagen de fondo ya adaptada. Dentro de este div tengo creado otro div con formato de cuadro por encima de la imagen. En este último le otorgue un opacity para dar un aspecto diferente a la página, y el problema o duda con la que me encuentro ahora es el siguiente; dentro de este último estoy comenzando a crear la página (menus, enlaces, etc) y resulta que la propiedad opacity esta siendo heredada por los hijos dentro del cuadro, yo no quiero que esto suceda si no que, todos los hijos del cuadro con esta propiedad sean sólidos.

Asi es como esta ahora (perdon si la imagen no se ve o es pequeña):


Me gustaría que ese menu (y lo que venga dentro del cuadro blanco semitransparente) sea sólido, es decir, sin heredar la propiedad opacity.

Muchas gracias por adelantado.

Hola!

En CSS, todas las propiedades se sobreescriben de acuerdo al orden que aparezcan. Esto quiere decir que, suponiendo el siguiente código:

body { color: red; }

body { color: orange; }

body { color: blue; }

El color final de la letra será azul (blue), puesto que es la última propiedad que aparece.

Como norma, las propiedades se reemplazan unas a otras de la siguiente forma:

1. Las propiedades escritas en la hoja de estilo reemplazan a las del navegador (el navegador tiene estilos por defecto).
1.a. Las propiedades se reemplazan a si mismas en el orden de aparición (las últimas del archivo, por ejemplo, reemplazarán a las primeras).
2. Las propiedades escritas en el archivo HTML (con la etiqueta <style>) reemplazarán a las del archivo CSS (y también a las del navegador). Ocurre lo mismo que el punto 1.a.
3. Las propiedades declaradas dentro de cada etiqueta reemplazarán a las anteriores.
4. Las propiedades declaradas con important! reemplazarán a todas las demás.

Si bien así funciona la herencia, no es buena idea re-declarar una propiedad para una misma etiqueta (de hecho, el navegador mostrará una advertencia diciendo que esta propiedad ya fue declarada).

Sobre tu problema, bastaría con declarar algo como esto:

#padre #hijo { opacity: 1.0; filter: alpha(opacity=100); }

Si eso no funciona, entonces algo así debería:

#padre #hijo * { opacity: 1.0; filter: alpha(opacity=100); }

Buenas skaparate:

Decir que he intentado los dos códigos que me has facilitado y no he logrado quitar esa transparencia. Dejo mi código css para que sea revisado, y en caso de que halla colocado mal el código que me diste saber si me podrias pasar el código en su forma correcta:

Dejo un comentario dentro del css explicando lo que coloque.

CSS:

#pagina {
	width: 70%;
	height: 100%;
	margin: 0 auto;
	background-color: #FFFFFF;
	opacity: 0.65; /* Hace el fondo medio transparente */
	}
/* Esta etiqueta "pagina" es donde cree el fondo blanco encima de la imagen con la transparencia. El código que viene debajo seria como implemente el código que me pasaste, y la etiqueta "texto" es un div que tengo creado para colocar texto en la web */

#pagina #texto * { opacity: 1.0; filter: alpha(opacity=100); }

#texto {
        background-color: #FFFFFF;
        opacity: 1.0;
	width: 65%;
	height: 450px;
	border-style: solid;
	position: relative; left: 8.8px;
	font-weight: bold;
	font-size: 20px;
}

¿Podrías poner el código HTML también?

Hmmm... hay algo que acabo de aprender.

Cuando se utiliza opacity, el navegador aplica esta propiedad al grupo de etiquetas (padre e hijos) para mostrarlos todos de una vez a través de un bufer (piensa en el bufer como una imagen que se dibuja una sola vez, cada vez que se actualiza la página), no se hereda. Esto quiere decir que no se puede utilizar opacity sin que afecte a todas las etiquetas hijas del elemento.

Puedes utilizar rgba(rojo, verde, azul, transparencia) para dar la opacidad que deseas:

#texto { background-color: rgba(0, 255, 0, 0.5) }

Muchas gracias, coloque el código que me facilitaste y funciono.

Se que debería crear otros hilos para estas dos preguntas, pero prefiero hacerlo aquí para no llenar el foro con cosas que seguramente ya fueron resueltas y no encuentro su hilo.

Tengo una animación en uno de los div de esta página, y por alguna razón (seguramente algún error programando que no encuentro) la animación no me funciona el IE (hasta ahora solo probé en Chrome). Dejo los estilos css de la animación para ver que puede estar pasando, los códigos que ejecutan esta animación se encuentran en el código css ya pasado en la sección: cuerpo/imagenes (esto siguiendo los comentarios escritos en dicho código).

Ademas de esto, estuve investigando sobre los comentarios condicionales para IE (incluso llegue a realizar un tutorial escrito en el foro y sin éxito) con la mala fortuna de que, estando el código correctamente introducido en la página (incluso llegue a copiar y pegar) estos comentarios no me funcionaban, es decir, los estilos que supuesta mente debían funcionar solo en el IE estaban formatando los estilos para cualquier navegador.

CSS de la animación:

/* Animación Diapositiva de imagenes index */
		@-webkit-keyframes imagen {
			0% {background-image: url("imagenes/gruas/grua_1.jpg");background-size: cover;}
			33% {background-image: url("imagenes/gruas/grua_3.jpg");background-size: cover;}
			66% {background-image: url("imagenes/gruas/grua_5.jpg");background-size: cover;}
			100% {background-image: url("imagenes/gruas/grua_7.jpg");background-size: cover;}
		}
		@-webkit-keyframes imagene {
			0% {background-image: url("imagenes/gruas/grua_2.jpg");background-size: cover;}
			33% {background-image: url("imagenes/gruas/grua_4.jpg");background-size: cover;}
			66% {background-image: url("imagenes/gruas/grua_6.jpg");background-size: cover;}
			100% {background-image: url("imagenes/gruas/grua_8.jpg");background-size: cover;}
		}
		@-moz-keyframes imagen {
			0% {background-image: url("imagenes/gruas/grua_1.jpg");background-size: cover;}
			33% {background-image: url("imagenes/gruas/grua_3.jpg");background-size: cover;}
			66% {background-image: url("imagenes/gruas/grua_5.jpg");background-size: cover;}
			100% {background-image: url("imagenes/gruas/grua_7.jpg");background-size: cover;}
		}
		@-moz-keyframes imagene {
			0% {background-image: url("imagenes/gruas/grua_2.jpg");background-size: cover;}
			33% {background-image: url("imagenes/gruas/grua_4.jpg");background-size: cover;}
			66% {background-image: url("imagenes/gruas/grua_6.jpg");background-size: cover;}
			100% {background-image: url("imagenes/gruas/grua_8.jpg");background-size: cover;}
		}
		@-o-keyframes imagen {
			0% {background-image: url("imagenes/gruas/grua_1.jpg");background-size: cover;}
			33% {background-image: url("imagenes/gruas/grua_3.jpg");background-size: cover;}
			66% {background-image: url("imagenes/gruas/grua_5.jpg");background-size: cover;}
			100% {background-image: url("imagenes/gruas/grua_7.jpg");background-size: cover;}
		}
		@-o-keyframes imagene {
			0% {background-image: url("imagenes/gruas/grua_2.jpg");background-size: cover;}
			33% {background-image: url("imagenes/gruas/grua_4.jpg");background-size: cover;}
			66% {background-image: url("imagenes/gruas/grua_6.jpg");background-size: cover;}
			100% {background-image: url("imagenes/gruas/grua_8.jpg");background-size: cover;}
		}
		@keyframes imagen {
			0% {background-image: url("imagenes/gruas/grua_1.jpg");background-size: cover;}
			33% {background-image: url("imagenes/gruas/grua_3.jpg");background-size: cover;}
			66% {background-image: url("imagenes/gruas/grua_5.jpg");background-size: cover;}
			100% {background-image: url("imagenes/gruas/grua_7.jpg");background-size: cover;}
		}
		@keyframes imagene {
			0% {background-image: url("imagenes/gruas/grua_2.jpg");background-size: cover;}
			33% {background-image: url("imagenes/gruas/grua_4.jpg");background-size: cover;}
			66% {background-image: url("imagenes/gruas/grua_6.jpg");background-size: cover;}
			100% {background-image: url("imagenes/gruas/grua_8.jpg");background-size: cover;}
		}

Por si acaso coloque el código donde ejecuto estas animaciones:

2º CSS:

/* Imagenes */
			#imagenes {
				width: 30%;
				height: 450px;
				float: right;
				position: relative; right: 8.8px;
			}
			.imagen_1 {
				width: 260px;
				height: 210px;
				margin: 0 auto;
				position: relative; top: 5px;
				background-image: url("imagenes/gruas/grua_1.jpg");
				background-size: cover;
				-webkit-animation-name: imagen;
				-webkit-animation-duration: 24s;
				-webkit-animation-iteration-count: infinite;
				-moz-animation-name: imagen;
				-moz-animation-duration: 24s;
				-moz-animation-iteration-count: infinite;
				-o-animation-name: imagen;
				-o-animation-duration: 24s;
				-o-animation-iteration-count: infinite;
				animation-name: imagen;
				animation-duration: 24s;
				animation-iteration-count: infinite;
			}
			.imagen_2 {
				width: 260px;
				height: 210px;
				margin: 0 auto;
				position: relative; top: 10px;
				background-image: url("imagenes/gruas/grua_2.jpg");
				background-size: cover;
				-webkit-animation-name: imagene;
				-webkit-animation-duration: 24s;
				-webkit-animation-iteration-count: infinite;
				-moz-animation-name: imagene;
				-moz-animation-duration: 24s;
				-moz-animation-iteration-count: infinite;
				-o-animation-name: imagene;
				-o-animation-duration: 24s;
				-o-animation-iteration-count: infinite;
				animation-name: imagene;
				animation-duration: 24s;
				animat

Hmm, no tengo experiencia con las animaciones CSS, así que no te puedo ayudar.

Sobre las etiquetas condicionales, eso es raro, pues no debería ocurrir. ¿Tienes el código html? Para ver por qué ocurre :P

Otra cosa, qué versión de IE utilizas para hacer tus pruebas? No todos tienen el mismo soporte (si ya la última versión de IE es mala, imagínate las primeras xD).

Irónicamente, los comentarios condicionales no funcionan en IE 10 en modo estándar (<!DOCTYPE html> es el modo estándar), según dice este artículo (en inglés).

Independiente de esto, no deberían integrarse los estilos que están comentados. ¿Puede que la página aún esté en la caché? Prueba presionando Control + F5 para recargar la página.

Voy a intentarlo y comentare, lo que mas me urge ahora de las dos preguntas seria mas la de la animacion, dado que la página se casi igual en todos los navegadores pero la animacion no me funciona en IE

Por ahí he leido que las animaciones en principio funcionan perfectamente en IE10, pero no el cambio de imagen de fondo como animación... Aunque no te puedo asegurar nada.