freeCodeCamp/guide/spanish/css/background-opacity/index.md

1.7 KiB

title localeTitle
Background Opacity Opacidad de fondo

Opacidad de fondo

La propiedad de opacidad especifica la opacidad / transparencia de un elemento, es decir, el grado en que el contenido detrás del elemento es visible.

La propiedad de opacidad puede tomar un valor de 0.0 - 1.0. Cuanto menor sea el valor, más transparente será:

Encuentra más detalles aquí

Puede elegir hasta qué punto desea que el elemento sea transparente. Tienes que agregar la siguiente propiedad CSS para lograr los niveles de transparencia.

Completamente opaco

.class-name { 
  opacity:1; 
 } 
 
 OR 
 
 .class-name { 
  opacity:1.0; 
 } 

Translúcido

.class-name { 
  opacity:0.5; 
 } 
 Opacity value can be anything between 0 and 1; 

Transparente

.class-name { 
  opacity:0; 
 } 
 
 OR 
 
 .class-name { 
  opacity:0.0; 
 } 

Alternativamente, puedes usar un valor rgba transparente como este: `` `css

.nombre de la clase{ color de fondo: rgba (0,0,0, .5); } `` ` El ejemplo anterior establece que el fondo es negro con un 50% de opacidad. El último valor de un valor rgba es el valor alfa. Un valor alfa de 1 es igual a 100%, y 0.5 (.5 para corto) quals 50%. Usamos este método para agregar transparencia a un elemento sin afectar el contenido del interior.

Un ejemplo de código para mostrar los rangos de opacidad de fondo.

Más información:

Para más información visite MDN Propiedad CSS de opacidad en CSS-Tricks

Soporte del navegador: Caniuse