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
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.
Puedes asignar cada clase CSS con la ayuda de los bloques. Recuerda escribirla de la siguiente manera.
Editor de WordPress – Avanzado – Clases CSS Adicionales: colocando en el caso de nuestro ejemplo (principal) para dar transparencia o (secundario) para mantenerlo opaco.
