Cómo agregar transparencia en CSS utilizando la propiedad de opacidad?
- Cómo agregar transparencia a un elemento
- Agregar un efecto flotante junto con la transparencia
- Cómo agregar transparencia a un elemento
- Agregar transparencia con RGBA
Empecemos.
Cómo agregar transparencia a un elemento
Puedes hacer cualquier elemento (e.gramo. imagen) que aparece en su sitio web transparente, asignando un cierto valor a la propiedad de opacidad CSS del elemento.
Ejemplo
Para comprender el concepto de transparencia, siga el ejemplo a continuación.
Html
Aquí hemos agregado una imagen y establecer su ancho en 200px y altura a 250px.
CSS
imgOpacidad: 0.6;
La opacidad de la imagen se ha establecido en 0.6.
Producción
La imagen es 60% opaca.
Nota: La opacidad y la transparencia son opuestas entre sí. Por lo tanto, los valores bajos de la propiedad de opacidad harán que el elemento sea más transparente y viceversa.
Por ejemplo, si disminuimos la opacidad y la establecemos en 0.2 como este.
imgOpacidad: 0.2;
La transparencia aumentará.
La imagen es 20% opaca.
Agregar un efecto flotante junto con la transparencia
Puede agregar un efecto de desplazamiento junto con la asignación de cierta opacidad a la imagen. Agregar este efecto cambiará la transparencia de una imagen cuando el usuario lleva el mouse sobre una imagen en particular.
Ejemplo
El siguiente ejemplo demuestra cómo usar un efecto de flotar con la propiedad de opacidad.
Html
En el código anterior, estamos agregando una imagen y dándole un ancho y altura.
CSS
imgOpacidad: 0.4;
img: hover
Opacidad: 1.0;
En el código CSS anterior, primero estamos asignando una opacidad de 0.4 Para hacer que la imagen sea transparente, entonces estamos agregando un efecto de desplazamiento a la imagen con Opacidad 1. Esto significa que cuando el usuario lleva el mouse sobre la imagen, no será transparente y lo contrario sucederá cuando el cursor del mouse se aleje de la imagen.
Producción
Un efecto flotante se agrega con éxito a la imagen junto con la transparencia.
Cómo agregar transparencia a un elemento y sus hijos
Usando la propiedad de opacidad, cuando agrega transparencia a un elemento, los hijos de ese elemento en particular también heredan la transparencia.
Ejemplo
Aquí vamos a demostrar cómo agregar transparencia a un elemento.
Html
Tengo una opacidad de 0.6
Tengo una opacidad de 1
Aquí hemos creado dos elementos para dejar en claro cómo funciona la transparencia para los elementos HTML.
CSS
div.opacidadOpacidad: 0.4;
div
Color de fondo: rosa;
relleno: 15px;
El primer elemento div tiene una transparencia de 0.4 y el otro elemento es completamente no transparente.
Producción
Cuanto más transparente sea un elemento, el contenido dentro de ese elemento también será transparente.
Agregar transparencia con RGBA
Los colores RGBA se usan para evitar la situación anterior, donde cuando aplica opacidad a un elemento, el contenido dentro del elemento también se vuelve transparente.
Ejemplo
Para evitar que el texto presente dentro de un elemento se vuelva transparente, use el siguiente código.
Html
Con propiedad de opacidad
Con color rgba
En el código anterior, estamos creando dos elementos. Al primer div se le ha asignado una opacidad de 0.2 para demostrar la diferencia entre usar solo la propiedad de opacidad y usar la propiedad de opacidad junto con los colores RGBA.
CSS
div.RGBAntecedentes: RGB (255,192,203);
relleno: 15px;
Opacidad: 0.2;
div.RGBA
Antecedentes: RGBA (255,192,203, 0.2);
Al primer div se le ha asignado un color de fondo rosa, relleno de 15px y opacidad de 0.2. Mientras que el segundo div se ha asignado el mismo color de fondo junto con una opacidad de 0.2 Como cuarto argumento en el método RGBA.
Producción
El texto dentro del elemento no se vuelve transparente cuando se usa transparencia con colores RGBA.
Conclusión
Puede agregar transparencia a varios elementos HTML, como contenedores DIV o imágenes utilizando la propiedad de opacidad. Esta propiedad hace valores de 0.0 a 1.0, además, cuanto menor sea el valor de esta propiedad, más la transparencia. Junto con la transparencia, también puede agregar un efecto de desplazamiento en los elementos, además, use los colores RGBA para evitar que el contenido dentro de un elemento se vuelva transparente cuando le agrega transparencia. Esta publicación le guía cómo agregar transparencia en CSS utilizando la propiedad de opacidad junto con ejemplos relevantes.