La propiedad opacity especifica la opacidad / transparencia de un elemento. Dicha propiedad puede tomar valores entre 0.0 y 1.0. El resultado quedaría así:
Ejm
img {
opacity: 0.5;
}
Efecto de transparencia con :hover
La propiedad opacity a menudo se usa junto con el selector :hover para cambiar la opacidad al pasar el mouse.
Ejm
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
Efecto de transparencia con :hover (2)
Este es otro ejemplo de transparencia con la pseudo-clase :hover
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>La propiedad opacity se usa a menudo junto con el :hover
Selector para cambiar la opacidad al pasar el mouse:</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>
Transparencia usando RGBA
Si no deseas aplicar opacidad a los elementos secundarios, como en nuestro ejemplo anterior, usa valores de color RGBA. El siguiente ejemplo establece la opacidad para el color de fondo y no para el texto.
Ejm
div {
background: rgba(76, 175, 80, 0.3)
}
Texto en una caja transparente
Ejm
<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>
El resultado sería