La propiedad opacity en CSS determina la transparencia de un elemento. Este atributo acepta valores entre 0 y 1. Es decir 0 indica que el elemento es completamente transparente «ha desaparecido» y 1 indica que el elemento es completamente opaco, que se ve al 100%.
Esta propiedad puede ser muy útil para crear efectos visuales interesantes, como superposiciones de imágenes con diferentes niveles de transparencia, o para mostrar u ocultar elementos de forma suave utilizando animaciones.
Ejemplos:
Puedes establecer la opacidad de un elemento añadiendo una clase CSS adicional desde el personalizador de WordPress. Por ejemplo, si quisieras establecer la opacidad de un elemento a la mitad, podrías utilizar el siguiente código:
.mi-elemento {
opacity: 0.5;
}También puedes utilizar valores de opacidad en decimales, como 0.25, 0.75,…
Para mantener la opacidad de un elemento secundario (ejemplo: Un texto o un botón) cuando se establece la opacidad del elemento principal, puedes utilizar la propiedad «background-color» en lugar de «opacity».
¿Por qué debería?
La propiedad opacity también afecta a los elementos secundarios del elemento al que se le aplica, (todo el contenedor se vería con opacidad). Si quieres aplicar la opacidad solo a la imagen y no a los elementos secundarios, puedes utilizar la propiedad background-color.
En HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<div class="contenedor">
<div class="imagen"></div>
</div>
</body>
</html>
En CSS:
.contenedor {
position: relative;
width: 300px; /* Ancho de la imagen */
height: 200px; /* Alto de la imagen */
background-color: black; /* Color de fondo negro */
}
.imagen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('ruta_de_la_imagen.jpg'); /* Reemplaza 'ruta_de_la_imagen.jpg' con la ruta de tu imagen */
background-size: cover;
opacity: 0.5; /* Opacidad de la imagen (0.5 para 50%) */
}
Sería algo parecido a la imagen de arriba [icon name=»arrow-up» prefix=»fas»]
Al utilizar background-color junto al valor «rgba», se mantiene la opacidad del elemento secundario sin verse afectada por el efecto de transparencia del elemento principal.
Editor de WordPress – Avanzado – Clases CSS Adicionales: colocando en el caso de nuestro ejemplo (principal) para dar transparencia o (secundario) para mantenerlo opaco.
