Fondo transparente en css

Css color de fondo

Cómo hacer que una caja sea semitransparenteEsta guía le ayudará a entender las formas de hacer que una caja sea semitransparente utilizando CSS.Cambie la opacidad de la caja y el contenidoSi desea que la caja y todo el contenido de la caja cambien de opacidad, entonces la propiedad de opacidad de CSS es la herramienta a la que debe recurrir. La opacidad es lo opuesto a la transparencia; por lo tanto, la opacidad: 1 es totalmente opaca – no verás a través de la caja en absoluto.

Utilizando un valor de 0 la caja será completamente transparente, y los valores entre los dos cambiarán la opacidad, con valores más altos dando menos transparencia.Cambiar la opacidad del color de fondo solamenteEn muchos casos sólo querrás hacer el color de fondo en sí mismo parcialmente transparente, manteniendo el texto y otros elementos completamente opacos. Para ello, utilice un valor de color que tenga un canal alfa, como rgba. Al igual que con la opacidad, un valor de 1 para el canal alfa hace que el color sea totalmente opaco. Por lo tanto, background-color: rgba(0,0,0,.5); establecerá el color de fondo con una opacidad del 50%.

Fondo css

La propiedad de opacidad de CSS es la primera forma que puede venir a tu mente para cambiar la transparencia. Pero esta propiedad no puede venir al rescate todo el tiempo, especialmente cuando hay una imagen de fondo con texto en ella que quieres hacer transparente.

La propiedad opacidad toma valores de 0.0 a 1.0, siendo 1 el valor por defecto para todos los elementos. Cuanto más bajo sea el valor, más transparente será. Así que si a un elemento se le da una opacidad de 0, será invisible.

CSS ofrece una forma de establecer la imagen de fondo para un elemento contenedor con la propiedad background-image, por lo que no tienes que hacerlo necesariamente con el CSS. Esto significa que también puedes colocar texto en el contenedor.

La desventaja de este enfoque es que la opacidad se establece para el contenedor donde están la imagen y el texto. Por lo tanto, la opacidad afecta también al texto, no sólo a la imagen. Esto probablemente no es lo que usted quiere.

Una solución para esta situación es establecer la imagen de fondo en el HTML. Esto facilita la aplicación de la opacidad sólo a la imagen, en lugar de establecer la imagen de fondo para el contenedor en el CSS.

Opacidad del color de fondo

No estoy usando CSS3. Así que no puedo usar los atributos de opacidad o filtro. Sin usar estos atributos ¿cómo puedo hacer transparente el color de fondo de un div? Debe ser como el ejemplo del cuadro de texto en este enlace. Aquí el color de fondo del cuadro de texto es transparente. Quiero hacer lo mismo, pero sin usar los atributos mencionados.

O definir una imagen de fondo (1px por 1px) guardada con el alfa correcto. (Para ello, utilice Gimp, Paint.Net o cualquier otro software de imagen que le permita hacerlo. Sólo tienes que crear una nueva imagen, eliminar el fondo y ponerle un color semitransparente, y luego guardarla en png).

Puede que sea un poco tarde para la discusión, pero inevitablemente alguien se tropezará con este post como lo hice yo. Encontré la respuesta que buscaba y pensé en publicar mi propia versión. El siguiente JSfiddle incluye cómo poner capas de .PNG con transparencia. La mención de Jerska del atributo de transparencia para el CSS del div fue la solución: http://jsfiddle.net/jyef3fqr/

Opacidad de la imagen de fondo

Debería funcionar. Esto es asumiendo que se requiere tener una imagen semi-transparente BTW, y no un color (que sólo debe utilizar rgba para). También se supone que no se puede alterar la opacidad de la imagen de antemano en Photoshop.

Establezca su opacidad CSS deseada y otras propiedades para el fondo y utilice la propiedad z-index (índice-z) para estilizar y posicionar el div bContent. De este modo, podrá colocar el div por encima del div de fondo sin que se altere su opacidad.

La última opción es simplemente hacer una imagen .png semitransparente del color que desee en su editor de imágenes de elección, establecer la propiedad background-image a la URL de la imagen y entonces usted no tendrá que preocuparse de jugar con el CSS y perder la capacidad y la organización de una estructura de div anidado.