CSS: opacidad única fondo, no el texto dentro

Question

tengo esta caja formulario de registro, y me gusta mucho la forma en el fondo obtiene la opacidad, transparente, con un 25% (85), pero entonces noto que el texto y los elementos de formulario también se oscurece un poco y tal, entonces me pregunto cómo hacer esto solo con el borde y el fondo y no con las cosas dentro de la caja?

#regForm { 
z-index:11; 
position: absolute; 
top: 120px; 
left: 500px; 
background: #000; 
color: #FFF; 
width: 500px; 
height: 240px; 
border: 6px solid #18110c; 
text-align: center; 
margin: 40px; 
padding: 1px; 
    opacity: 0.85; 
    -moz-opacity: 0.85; /* older Gecko-based browsers */ 
    filter:alpha(opacity=85); /* For IE6&7 */ 

} 

Answer 1

La forma más fácil sería mover el texto en un div por separado, like so. Básicamente se aplica la opacidad a un div separada y la posición del texto en la parte superior ...

<div id="parent"> 
    <div id="opacity"></div> 
    <div id="child">text</div> 
</div> 

div#parent { position:relative; width:200px; height:200px; } 
div#child { position:absolute; width:200px; height:200px; z-index:2; } 
div#opacity { position:absolute; width:200px; height:200px; z-index:1; } 

La otra ruta sería rgba. No olvide que hay una propiedad de CSS independiente para alimentar IE ya que no es compatible con la propiedad rgba. También puede alimentar un png transparente.

#regForm { 
    background: rgb(200, 54, 54); /* fallback color */ 
    background: rgba(200, 54, 54, 0.5); 
} 

Y para IE ...

<!--[if IE]> 

    <style type="text/css"> 

    .color-block { 
     background:transparent; 
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050); 
     zoom: 1; 
    } 

    </style> 

<![endif]--> 

Personalmente me quedo con la primera opción, ya que es menos de una molestia.

Answer 2

cant't hacerse: Cualquier elementos secundarios heredarán la opacidad de los padres.

que su caso es fácil, aunque - sólo tiene que utilizar dos div s. Tener la imagen de fondo en uno y aplicar la opacidad, y poner el contenido en el segundo. Use position: absolute y z-index para colocarlos uno encima del otro.

Answer 3

RGBA es el camino a seguir si sólo estás buscando una solución CSS. Es posible utilizar un color sólido como respaldo para los navegadores antiguos que no pueden usar RGBA.

.stuff { 
    background-color: rgb(55, 55, 55); 
    background-color: rgba(55, 55, 55, 0.5); 
} 

También puede repliegue en una imagen:

.stuff2 { 
    background: transparent url(background.png); 
    background: rgba(0, 0, 0, 0.5) none; 
} 

Aquí es todo lo necesario para conseguir que esto funcione en todas las versiones malignas de IE: http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer

Answer 4

Su mejor opción será probablemente para usar PNG semitransparentes para su fondo, o para establecer los colores para el fondo y el borde usando RGBa. Los archivos PNG funcionarán bien si no le molesta el marcado adicional que necesitará para crear un contenedor de ancho flexible, pero tampoco son compatibles con IE6 (si es una preocupación).

RGBA es menos ampliamente implementada en todos los navegadores, pero si la transparencia sólo se utiliza para estilo visual, entonces es un buen lugar para utilizar alguna mejora progresiva.

Para RGBA, tendrá que añadir una línea adicional como punto de retorno:

#regForm { 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.5); 
    border-color: rgb(24, 17, 12); 
    border-color: rgba(24, 17, 12); 
} 

Cualquier navegador que no reconoce la declaración RGBA simplemente utilizar el RGB normal.

CSS-Tricks article on RGBa across browsers

Answer 5

No hay necesidad de hacer todas esas cosas por el estilo hay necesidad de aplicar posiciones en un div a continuación, la opacidad, aquí es una forma muy sencilla para lograrlo, background: rgba(0, 0, 0, 0.6);

Sólo tienes que utilizar el color de fondo con valor de opacidad