Artículo original escrito por Kolade Chris
Artículo original Transparent Background – Image Opacity in CSS and HTML
Traducido y adaptado por Santiago Yanguas
Transparencia juega un papel importante en el desarrollo del front-end. Te permite elegir la transparencia de los elementos de tus páginas web.
Puedes ajustar la transparencia de varias maneras - porque por supuesto, en CSS, hay múltiples maneras de hacer lo mismo.
La propiedad de opacity de CSS es la primera forma que puede venir a tu mente para cambiar la transparencia. Pero esta propiedad no puede venir al rescate todo el tiempo, especialmente cuando hay una imagen de fondo con texto en ella, que quieres hacer transparente.
Así que en este artículo, voy a mostrarte las distintas formas de ajustar la transparencia para que puedas empezar a implementarla en tus proyectos de código.
Transparencia de la imagen con la propiedad CSS Opacity
Para hacer que una imagen sea transparente, puedes utilizar la propiedad de opacity de CSS, como he mencionado anteriormente. La sintaxis básica de la propiedad opacity se muestra en el siguiente fragmento de código:
selector {
opacity: value;
}
La propiedad opacidad toma valores de 0,0 a 1.0, siendo 1 el valor por defecto para todos los elementos. Cuanto más bajo sea el valor, más transparente será. Así, si a un elemento se le da una opacidad de 0, será invisible.
Puedes encontrar ejemplos de diferentes valores de opacidad en los siguientes fragmentos de código:
<img src="freecodecamp.png" alt="freecodecamp-logo" />
He añadido algo de CSS para centrar todo en la página:
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
height: 100vh;
}
img {
opacity: 1;
}
Un valor de opacidad de 1 es el predeterminado, por lo que la imagen aparece así:
img {
opacity: 0.5;
}
Este código nos da un 50% de opacidad, puedes ver que el logo se ha desvanecido un poco:
img {
opacity: 0;
}
Con una opacidad de 0, la imagen es 100% transparente, por lo que se vuelve invisible:
La única forma de estar seguro de que la imagen está en la página es inspeccionarla con las devtools de tu navegador:
Puedes usar este valor de opacidad para hacer muchas cosas - por ejemplo, puedes usarlo para incluir texto sobre una imagen heroica en un sitio web.
Tal vez te preguntes por qué querrías hacer invisible el contenido con un valor de opacidad de 0. Bueno, puede ser útil en animaciones, y en la construcción de juegos HTM + CSS + JavaScript también.
Definitivamente, querrás usar el posicionamiento CSS para ayudarte a alinear las cosas. Discutiré esto en las próximas partes del artículo.
Transparencia de la imagen de fondo en HTML y CSS
CSS ofrece una forma de establecer la imagen de fondo para un elemento contenedor con la propiedad background-image, por lo que no tienes que hacerlo necesariamente con el CSS. Esto significa que también puedes colocar texto en el contenedor.
<div class="showcase">
<h1>A group of ring-tailed lemurs</h1>
</div>
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
height: 100vh;
}
.showcase {
background-image: url("ring-tailed-lemurs.jpeg");
height: 400px;
width: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.6;
}
La desventaja de este enfoque es que la opacidad se establece para el contenedor donde están la imagen y el texto. Por lo tanto, la opacidad afecta también al texto, no sólo a la imagen. Esto probablemente no es lo que tú quieres.
La solución
Por defecto, cuando se aplica una opacidad a un contenedor, los descendientes la heredan también.
Una solución para esta situación es establecer la imagen de fondo en el HTML. Esto facilita la aplicación de la opacidad sólo a la imagen, en lugar de establecer la imagen de fondo para el contenedor en el CSS.
Esta vez, la imagen y el texto estarán separados, por lo que el texto no heredará el valor establecido para la opacity.
Esto significa que también hay que utilizar el posicionamiento CSS para alinear el texto dentro de la imagen.
<div class="showcase">
<img src="ring-tailed-lemurs.jpeg" alt="lemurs" class="bg-image" />
<h1 class="bg-img-title">A group of ring-tailed lemurs</h1>
</div>
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
height: 100vh;
}
.showcase {
position: relative;
}
.bg-image {
opacity: 0.7;
}
.bg-img-title {
position: absolute;
top: 420px;
left: 20px;
}
En el fragmento de código CSS anterior, utilizo flexbox para centrar todo en la página.
El elemento div contenedor con la clase de showcase se posiciona de forma relative, por lo que puedes posicionar el texto h1 de forma absolute dentro de él. Esto empujará el texto h1 a la esquina superior izquierda de la imagen. Las propiedades top y left se utilizan entonces para empujar el texto a la esquina inferior izquierda de la imagen.
Si se pregunta qué son las propiedades top e left, son las propiedades a las que se accede cuando se utiliza la propiedad display.
Además de estas dos, también tienes acceso a las propiedades right e bottom. Estas te permiten posicionar un elemento en cualquier lugar.
Al final, la imagen es opaca y el texto no se ve afectado:
Conclusión
En este artículo, has aprendido a utilizar la propiedad de opacity de CSS para hacer que las imágenes sean transparentes.
Como el CSS sigue siendo complicado y un poco raro, es útil combinar la propiedad de opacity con otras características de CSS, como el posicionamiento, para poder utilizarla correctamente.
Aparte del posicionamiento CSS, también se puede utilizar la propiedad de opacity con elementos pseudo CSS como ::before y ::after, que es otra forma de hacerlo.
Gracias por leer y sigue codificando.