divs con opacidad...

[vani18]

Hola todo bien queria. Hacer una consulta. Sobre paginas q usan divs con opacidad.... Transparentes casi...

Bueno el es que use. Opacity y se me hace todo lo que contiene adentro medio transparente.opaco... Texto .imagenes....

Creo q esto se puede evitar... Colocando el div opaco y en otro encima. Todo transparente y ahi queda....ya q se hereda la opacidad....

Queria saber si esta bien hacer como hago...

Usar background image...url... De una imagen en png. 'Opaca'?

[falconeta8]

Si mira la idea es esta, te planteo un ejemplo:

Tengo un div que quiero que tenga opacidad y un texto que no tenga nada.

Lo que hay que hacer es crear un div para uno y uno que contenga a los dos...

<div id=”contenedor”>
<div id=”texto”>Hola</div>
<div id=”fondo”></div>
</div>

Con esta estructura podemos dar opacidad independiente al fondo y luego solo quedaria posicionar el texto de manera absoluta para que quede encima del fondo. Por ejemplo:

fondo {
width: 200px;
height: 200px;
padding:10px;
background-color: red;
filter: alpha(opacity=50);
-moz-opacity: .5;
opacity: .5;
}
texto {
width: 200px;
height: 200px;
padding:10px;
position: absolute;
}

Un saludo !

[pzin]

Y si lo quieres hacer de forma fácil, puedes utilizar rgba(). Siguiendo el ejemplo de falconeta8, con esto consigues lo mismo.

Código HTML:

<div>Hola</div>
 

Código CSS:

div {
  background-color: rgba(255,0,0,0.5); 
  width: 200px;
  height: 200px;
  padding: 10px;
}
 

El último valor de rgba es el alpha. Lo que viene siendo la opacidad, va de 0 a 1 como con opacity.

Edito: El ejemplo de falconeta8 no te funcionará, está a falta de varias cosas.

[furoya]

¿El buscador no anda?

Uy, sí, anda!

Función "opacity"