CSS - Gradiente de opacidad CSS3

Producción

Paso 3: diseñe el contenedor Div

Acceda al contenedor Div utilizando el nombre de clase con el selector de clases como "#contenido principal":

#contenido principal
Color de fondo: Lightgreen;
margen: 20px 80px;
borde: 3px de azul punteado;

Luego, aplique las propiedades CSS enumeradas a continuación:

• "color de fondo"Se utiliza para configurar el color en la parte posterior del elemento.
• "margen"Asigna espacio en el lado exterior del límite definido.
• "bordeLa propiedad se utiliza para determinar un borde alrededor del elemento definido.

Paso 4: Párrafo de estilo

Ahora, diseñe el párrafo accediendo a él con el nombre de la clase ".Párrafo 1":

.Párrafo 1
color azul;
desbordamiento: oculto;
Posición: relativo;
mezcla-mezcla mode: luz dura;
tamaño de fuente: 30px;

Aquí:

• "color"La propiedad asigna un color al texto dentro del párrafo.
• "Desbordamiento"Se utiliza para mostrar los resultados cuando el contenido se derrama desde la caja de un elemento. Esta propiedad determina si tomar texto o agregar barras de desplazamiento cuando el contenido de un elemento de este elemento es largo para establecerse en un área en particular.
• "posición"Establece la posición del elemento en un documento.
• "mezcla de mezcla"La propiedad CSS se utiliza para establecer el contenido de un elemento mezclado con el contenido raíz y el fondo del elemento.
• "tamaño de fuente"Se usa para definir una fuente particular para el texto en el párrafo.

Paso 5: Establezca "gradiente lineal" en el párrafo

Utilizar el ".Párrafo 1"Para acceder a la clase": después ":

.Párrafo-1: después de
Posición: Absoluto;
arriba: 0px;
fondo: gradiente lineal (transparente, gris);
Izquierda: 0px;
contenido: "";
Ancho: 100%;
Altura: 100%;
Pointer-Events: Ninguno;

Según el fragmento de código dado:

• "posición"Está establecido como absoluto en este fragmento.
• "izquierda" y "arribaLas propiedades se utilizan para configurar la posición del elemento en los lados izquierdo y superior.
• "fondo"La propiedad establecida como" gradiente lineal "crea un fondo que consiste en una transición continua entre diferentes colores con una línea recta.
• "contenidoSe utiliza la propiedad para configurar el contenido.
• "ancho"Asigna el ancho del elemento.
• "alturaSe utiliza la propiedad para establecer la altura del elemento definido.
• "puta"Especifica las condiciones bajo las cuales un cierto elemento visual se convirtió en el objetivo del evento

Producción

Se puede notar que el gradiente de opacidad CSS se ha aplicado con éxito.

Conclusión

Para establecer el gradiente de opacidad, primero, agregue texto en el párrafo utilizando el "

" etiqueta. Luego, acceda al párrafo y aplique el "fondo"Propiedad CSS, y establezca el valor de esta propiedad como"gradiente lineal". Crea un fondo que consiste en una transición progresiva entre dos o más colores a lo largo de una línea recta. Este artículo ha explicado el gradiente de opacidad CSS.