Opacidad/Transparencia de la imagen CSS
Tabla de contenido
La propiedad opacidad especifica la opacidad/transparencia de un elemento.
Imagen transparente
La propiedad opacidad puede tomar un valor de 0,0 a 1,0. Cuanto menor sea el valor, más transparente:
opacity 0.2
opacity 0.5
opacity 1
(default)
Ejemplo
img {
opacity: 0.5;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>
<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
</body>
</html>
Efecto de desplazamiento transparente
La propiedad opacity se usa a menudo junto con el selector :hover para cambiar la opacidad al pasar el mouse:
Ejemplo
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">
</body>
</html>
Ejemplo explicado
El primer bloque CSS es similar al código del Ejemplo 1. Además, agregamos lo que debería suceder cuando un usuario pasa el cursor sobre una de las imágenes. En este caso queremos que la imagen NO sea transparente cuando el usuario pasa el cursor sobre ella. El CSS para esto es opacity:1;.
Cuando el puntero del mouse se aleja de la imagen, la imagen volverá a ser transparente.
Un ejemplo de efecto de desplazamiento invertido:
Ejemplo
img:hover {
opacity: 0.5;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">
</body>
</html>
Caja transparente
Cuando se utiliza la propiedad opacidad para agregar transparencia al fondo de un elemento, todos sus elementos secundarios hereda la misma transparencia. Esto puede hacer que el texto dentro de un elemento totalmente transparente sea difícil de leer:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Ejemplo
div {
opacity: 0.3;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #04AA6D;
padding: 10px;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>
<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>
</body>
</html>
Transparencia usando RGBA
Si no desea aplicar opacidad a elementos secundarios, como en nuestro ejemplo anterior, utilice valores de color RGBA. El siguiente ejemplo establece la opacidad para el color de fondo y no para el texto:
100% opacity
60% opacity
30% opacity
10% opacity
En nuestro capítulo sobre colores CSS aprendió que puede usar RGB como valor de color. Además de RGB, puede utilizar un valor de color RGB con un canal alfa (RGBA), que especifica la opacidad de un color.
Un valor de color RGBA se especifica con: rgba(rojo, verde, azul, alfa). El El parámetro alfa es un número entre 0,0 (completamente transparente) y 1,0 (completamente opaco).
Consejo: Aprenderá más sobre los colores RGBA en nuestro capítulo Colores CSS.
Ejemplo
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30%
opacity */
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(4, 170, 109);
padding: 10px;
}
div.first {
background: rgba(4, 170, 109, 0.1);
}
div.second {
background: rgba(4, 170, 109, 0.3);
}
div.third {
background: rgba(4, 170, 109, 0.6);
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>
<p>With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>
<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>
</body>
</html>
Texto en cuadro transparente
This is some text that is placed in the transparent box.
Ejemplo
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Ejemplo explicado
Primero, creamos un elemento <div> (class="antecedentes") con una imagen de fondo y un borde.
Luego creamos otro <div> (class="transbox") dentro del primer <div>.
El <div class="transbox"> tiene un color de fondo y un borde - el div es transparente.
Dentro de lo transparente <div>, agregamos algo de texto dentro de un elemento <p>.