Opacidad en CSS es una propiedad que especifica controlar la transparencia de elementos como contenido o imágenes . Usando esta propiedad, podemos configurar cualquier imagen para que sea completamente opaca ( visible ), totalmente transparente ( oculto ), o translúcido (parcialmente visible). Se necesita un valor numérico que se encuentre entre 0 y 1. Donde 0 define completamente transparente y 1 define completamente visible. Los valores de opacidad entre 0 y 1, como 0,2, 0,4, 0,6, etc., cambian una imagen de transparente a opaca aumentando gradualmente el valor decimal.
Sintaxis
opacity :
El valor numérico debe estar entre 0 y 1 para que la imagen sea semitransparente. Si proporcionamos 1, la imagen será opaca, si el valor numérico es 0, la imagen se volverá completamente transparente.
Ejemplo 1 : En este ejemplo, usaremos la propiedad de opacidad para hacer que el elemento sea transparente al mover el mouse sobre el elemento.
Principal.html
Simple example to display the Opacity .get { background: red; width: 300px; height: 250px; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; } .get:hover { // hover is used to show the impact on element when the mouse on the element. opacity: 0.5; // set the opacity value to 0.5 } // use of class in CSS. Producción
Pase el mouse sobre el cuadro rojo para mostrar un efecto de transparencia u opacidad.
Opacidad de transición en CSS
En CSS, un opacidad de transición es una propiedad que se utiliza para cambiar suavemente el estado de opacidad de un nivel a otro. Significa que la opacidad de transición cambia el estado del elemento opaco a transparente con una duración de tiempo definida. La transición tiene cuatro propiedades: propiedad de transición, duración de la transición, función de tiempo de transición y retraso de transición, que se utilizan para realizar el efecto de opacidad en una imagen. El duración de la transición es una propiedad importante para cambios graduales o cambios repentinos que reflejan el efecto de opacidad en un elemento durante un tiempo definido en milisegundos o segundos.
La propiedad abreviada de transición es la siguiente:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Sintaxis para definir la opacidad de la transición en CSS
{ transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } Propiedad de transición
A continuación se muestran las propiedades de transición utilizadas para controlar los efectos de transición.
| Valor | Descripción |
|---|---|
| Transición- propiedad | Se utiliza para definir el nombre de la propiedad CSS que muestra el efecto de transición a las imágenes. |
| Duración de la transición | Se utiliza para definir el período de tiempo en segundos o milisegundos para mostrar el efecto de transición. |
| Función de sincronización de transición | Se utiliza para definir la curva de velocidad en una imagen para mostrar el efecto de transición. |
| Transición- retraso | Especifica si el efecto de transición se inicia en el elemento o imagen. |
Nota: Al configurar la propiedad de transición para la imagen o el contenido, debemos definir la propiedad de duración de la transición; de lo contrario, la duración pasa a ser 0 y no mostrará ningún efecto.
La necesidad de opacidad de transición en CSS
El opacidad es una propiedad CSS simple que se usa para controlar la transparencia de una imagen estableciendo el rango de opacidad de 0 a 1. Refleja el cambio estático o repentino en un elemento para mostrar el efecto de opacidad. Por ejemplo, si queremos mostrar una imagen como transparente, tenemos que establecer el valor de opacidad de 0 a 1. Después de eso, muestra el efecto de opacidad inmediatamente en lugar de tomar algo de tiempo. Por lo tanto, utilizamos un opacidad de transición en CSS que controla la transparencia de un elemento durante un período de tiempo definido. Usando la función de tiempo de transición en la opacidad de transición, podemos determinar la curva de velocidad de un elemento que especifica el efecto de opacidad rápida en una imagen. De esta manera, utilizamos el efecto de opacidad de transición para reflejar los cambios en el período de tiempo especificado en lugar de ocurrir inmediatamente.
Ejemplo 2: En este ejemplo, vamos a utilizar la propiedad de opacidad de transición que refleja el efecto de opacidad en un período de tiempo específico en lugar de inmediatamente.
Archivo1.html
CSS transition opacity Property .pr{ width: 400px; height: 300px; background: lightgreen; position: relative; } .cr{ width: 270px; height: 200px; position: absolute; /* top: 30px; */ left: 30px; color: white; margin: 40px auto; margin-bottom: 30px; font-family: Arial, Helvetica, sans-serif; background: red; font-weight: Bold; font-size: 36px; opacity: 0; } .cr:hover { opacity: 1; transition: opacity 2s ease-out; /* It slowly shows the element as we place the mouse on the box and when the time reaches 2 seconds, it is fully visible. */ -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-in-out; } JavaTpoint: Best Tutorial Site Check link is working <br> <p> https://www.javatpoint.com/ </p> Producción
