Propiedad de Opacidad de CSS

Question

Hola, estoy usando CSS Opacity Property para una etiqueta de div y funciona bien, pero el problema es que cuando escribo texto o pego imágenes en esa etiqueta de div también se desvanecen. Solo necesito que el color de fondo div desaparezca y no el contenido div. Mi código es ...

#fade div 
{ 
opacity:0.1; 
filter:alpha(opacity=10); /* For IE8 and earlier */ 
width:750px; 
height:150px; 
background-color:#FFFFFF; 
} 

#text in fade div 
{ 
font-weight:bold; 
color:#8A2BE2; 
} 

Thankyou !!!

Answer 1

Es mucho más fácil usar rgba() o un PNG transparente para el fondo.

rgba(0, 0, 0, .1); 
rgba(0, 0, 0); //fallback 

Answer 2

Por supuesto la opacidad se aplica a los elementos secundarios como well.What se puede hacer es segragate su margen de beneficio.

<div id='Div-With-Opacity-set'> 
</div> 
<div id='Child-Elements-for-the-above-div'> 
</div> 

Alinee su marcado cuidadosamente para que el marcado se parezca a lo que desea.

Answer 3

Puede utilizar rgba() propiedad por éste:

escribir así:

#fade div 
{ 
background-color: rgba(0,0,0,0.1); 
width:750px; 
height:150px; 
background-color:#FFFFFF; 
} 

Para IE se puede utilizar IE filter

background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000); /* IE6 & 7 */  zoom: 1; 

puede generar su filtro de aquí http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

Answer 4

¿Por qué no re establecer la opacidad entonces?

#text in fade div 
{ 
    font-weight:bold; 
    color:#8A2BE2; 
    opacity:1; 
    filter:alpha(opacity=100); /* For IE8 and earlier */ 
} 

Answer 5

Simplemente use 1px semi transparente gif y repítalo con xey. Por lo que yo sé, es la manera más fácil de establecer un fondo semitransparente.

Answer 6

Su mejor opción sin CSS3 es probablemente crear un div y colocar otro div encima de él, pero no anidado dentro de él. La opacidad filtra a TODOS los elementos dentro del elemento con el conjunto de opacidad.

Si coloca un div inmediatamente a la derecha, y luego le da un margen de -750px ;, podría darle una opacidad de 1, pero el div detrás de él podría tener una opacidad de 0.1, y esto funcionaría multa.

Con CSS3 usted puede hacer esto:

#fade 
{ 
width:750px; 
height:150px; 
background-color: rgba(255,255,255,0.1); 
} 

y justo el fondo sería 0,1 opacidad. El texto aún sería 1.

Lo que personalmente hago con más frecuencia es crear un .png pequeño con el fondo transparente que quiero, y luego establecer ese .png como fondo de un elemento. En photoshop pude establecer la opacidad del fondo blanco en 0.1, luego guardar un cuadrado de 50X50, y luego tengo una transparencia casi perfecta (sin IE6).

Answer 7

algo así como http://jsfiddle.net/PWM5f/ que necesita