Problemas con propiedad "opacity"

[ceaped]

Buenos días para todos

Tengo el siguiente estilo:

Código CSS:

#marco_derecho {
    width: 600px;
    height: 400px;
    float: right;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    margin-top: -130px;
    opacity: .77;
    filter:alpha(opacity=70); /* IE8  */
    background-color: #000000;
}
 

Pero si pongo algo encima también queda transparente, como por ejemplo una imagen.

Encontré esta otra propiedad:

Código CSS:

background:rgba(0, 0, 0, 0.7);
 

Y funciona bien.

Esta última también es para IE.

Cual sería la manera correcta de utilizarla. Lo que quiero es poner un fondo negro al 70% y encima texto e imagenes

Gracias por su ayuda

[webosiris]

son cosas DIFERENTES, no hay una forma mejor que la otra, todo depende lo que quieras lograr.

opacity trabaja la opacidad de todo el elemento (junto con sus hijos y nodos)
usar rgba en el background te permite usar colores rgba (eso es:rojo, verde, azul, canal alfa)

para lo que quieres, usa RGBA.

PD: rgba funciona a partir de IE9, IE8 y anteriores no lo soportan.

[ceaped]

Hola webosiris
Gracis por tu ayuda
La mejor manera es usar "rgba" pues como dices opacity es para todo, hijos y nodos.

Gracias por tu ayuda

[Jg23]

Utilízalo de esta forma:

Código CSS:

#marco_derecho {
    width: 600px;
    height: 400px;
    float: right;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    margin-top: -130px;
    opacity: 0.7;
    background-color: #000000;
}
 

[webosiris]

Iniciado por Jg23

Utilízalo de esta forma

con todo respeto, creo que no leíste/entendiste el tema. Opacity no le va a servir porque también le va a hacer semitransparentes las fotos que tiene dentro de #marco_derecho

ceaped, de nada

[vtscarlos]

background:rgba(0, 0, 0, 0.8); debería ir

[pzin]

También está hsla(). Aunque es más de lo mismo en cuanto a lo que hace y al soporte.