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

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

ACTUALIZACIÓN: resolver con la solución RGBA dada a continuación en conjunción con CSS3PIE's solution for getting rgba to work in IE browsers.

Fuente

2011-01-18 at.

puedo leer esto como diciendo que quieres 50% translucidez en * sólo las partes blancas * de la imagen de fondo, y las partes que no son blancas siendo opaca . Yo que es lo que buscas? Todas las respuestas hasta ahora abordan la opacidad de la imagen completa. –

@Stephen P, mientras que su interpretación es válida, creo ** él dice que quiere que el 'div 'tenga un' color de fondo' de blanco, y que ese color tenga una transparencia del 50%. No creo que se refiera a una cosa tipo css de máscara de imagen. –

Usted es correcto David –

Puede utilizar el background-color: rgba() notación:

#theIdofYourElement, 
.classOfElements { 
    background-color: #fff; 
    background-color: rgba(255,255,255,0.5); 
}

Editado para añadir el valor por defecto background-color (para los navegadores que no entienden la notación rgba()). Aunque tenía la impresión de que todos menos IE hacen lo entiendo (pero podría estar equivocado, y no lo he probado para estar seguro ...).

Edita con agradecimiento a @akamike.

Editado para hacer frente a la pregunta de OP (en los comentarios):

la que los navegadores no entienden RGBA? ¿Lo harán todos en el futuro, es esta parte de css3?

La mejor información que pude encontrar es the CSS Tricks' rgba() browser support table, con a link to a demo and 'more complete' compatibility table.

Fuente

2011-01-18 21:23:30

It Debería agregarse que los navegadores que no entienden rgba no tendrán un fondo, por lo tanto, declare un rgb sólido o color de fondo hexadecimal antes de su declaración de rgba. – akamike

esto es lo que estoy buscando, pero ¿qué navegadores no entienden rgba? ¿Lo harán todos en el futuro, es esta parte de css3? –

@at: ver respuesta actualizada =) –

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

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

Usar RGBA también es una posibilidad, pero no solo está perdiendo IE6 en ese momento, todavía hay bastantes personas que usan navegadores que no son compatibles con el esquema alfa.

Fuente

2011-01-18 21:23:55 minichate

¡eso es fácil! Pero me gusta más la solución rgba –

Si ya está usando modernizr, esta solución sería una alternativa viable. – gillytech

Si desea multi-navegador opacidad, que puede manejar cada uno dentro de su definición 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 */ 
}

Fuente

2011-01-18 21:25:09 hunter

+1 para una respuesta completa =) –

Esto hará que el primer plano del div 50% también sea transparente, ¿o no? – minichate

esto hace que el primer plano también sea translúcido –

Hay una propiedad CSS llamada backdrop-filter proporcionar translucidez real (en oposición a la transparencia, que ya está disponible en el CSS) .

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

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

Fuente

2017-11-14 17:11:11 sandstrom

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

Respuesta

Cuestiones relacionadas