poner - texto opaco sobre fondo semitransparente con css

¿Cómo hacer el color de fondo de un div translúcido?

Question

Solo quiero que el color de fondo del blanco en mi div sea translúcido aproximadamente un 50%. El contenido debe ser completamente opaco. ¿Cuál es la forma correcta de hacer esto? Cuando busqué la propiedad CSS de fondo , imaginé que encontraría una configuración de opacidad, pero no lo hice. No me importa IE6.

ACTUALIZACIÓN : resolver con la solución rgba que se presenta a continuación junto con la solución de CSS3PIE para que rgba funcione en los navegadores IE .

Answer 1

Hay una propiedad de CSS llamada backdrop-filter proporciona una translucidez real (a diferencia de la transparencia, que ya está disponible en CSS).

Actualmente solo es compatible con Safari, pero puede agregarse a más navegadores.

.my-selector {
   backdrop-filter: blur(5px);
}

• Más sobre el selector
• Soporte del navegador

Answer 2

La manera más fácil es crear un PNG semitransparente y simplemente usarlo como su imagen de fondo para el div.

Si está utilizando Photoshop (o herramientas similares) simplemente cree una imagen de 10px por 10px que sea completamente blanca, luego arrastre el control deslizante de opacidad al 50%. Guárdalo como PNG y deberías estar rockeando!

El uso de RGBA también es una posibilidad, pero no solo estás perdiendo IE6, sino que hay muchas personas que usan navegadores que no admiten el esquema alfa.

Answer 3

Puede usar la notación background-color: rgba() :

#theIdofYourElement, .classOfElements { background-color: #fff; background-color: rgba(255,255,255,0.5); } Editado para agregar el background-color predeterminado (para los navegadores que no entienden la notación rgba() ). Aunque tenía la impresión de que todos menos IE lo entendían (pero podría estar equivocado, y no lo había probado para estar seguro ...).

Edita con gracias a @akamike.

Editado para abordar la pregunta de OP (en comentarios):

qué navegadores no entienden rgba? ¿Lo harán todos en el futuro, es esta parte de css3?

La mejor información que pude encontrar es la tabla de compatibilidad del navegador rgba() CSS Tricks , con un enlace a una demostración y una tabla de compatibilidad "más completa" .

Answer 4

Si desea opacidad en varios navegadores, puede manejar cada uno dentro de su definición de css

div
{
    opacity: .50; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */
    filter: alpha(opacity=50); /* IE lt 8 */
    -ms-filter: "alpha(opacity=50)"; /* IE 8 */
    -khtml-opacity: .50; /* Safari 1.x */
    -moz-opacity: .50; /* FF lt 1.5, Netscape */
}