La opacidad en CSS es la propiedad de un elemento que describe la transparencia del elemento. Es lo opuesto a la transparencia y representa el grado en que se ocultará el contenido.
Podemos aplicar la opacidad con diferentes propiedades de estilo a los elementos. Algunos de ellos se discuten a continuación:
Opacidad de la imagen: la propiedad de opacidad se utiliza en la imagen para describir la transparencia de la imagen. El valor de la opacidad se encuentra entre 0,0 y 1,0, donde un valor bajo representa una transparencia alta y un valor alto representa una transparencia baja. El porcentaje de opacidad se calcula como Opacity% = Opacity * 100.
Ejemplo: Este ejemplo describe la propiedad de opacidad aplicándola a la imagen.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Opacity property</title>
<style>
.forest {
opacity: 0.5;
}
p {
font-size: 25px;
font-weight: bold;
margin-bottom: 5px;
}
.opacity {
text-align: center;
}
</style>
</head>
<body>
<div class="opacity">
<p>Image with 100% opacity (original image)</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png"
class="forest1">
<br>
<br>
<p>Image with 50% opacity</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png"
class="forest">
</div>
</body>
</html>
Producción:
Opacidad de desplazamiento de imagen: la propiedad de opacidad de desplazamiento se aplica a la imagen cuando el mouse lo coloca sobre la imagen; de lo contrario, la propiedad de opacidad cambia. El valor de la opacidad puede revertir fácilmente el proceso configurando la opacidad como un valor más alto al principio y luego bajándolo al pasar el mouse sobre él como:
Sintaxis:
.hightolow {
opacity: 1.0;
}
.hightolow:hover {
opacity: 0.5;
}
Ejemplo: este ejemplo describe la propiedad de opacidad aplicándola a la imagen para generar opacidad al pasar el cursor sobre ella.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Image Hover Opacity</title>
<style>
.gfg_opacity {
opacity: 0.5;
}
.gfg_opacity:hover {
opacity: 1.0;
}
.main {
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<h1>Image Hover Opacity:</h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png"
class="gfg_opacity">
<br>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png"
class="gfg_opacity">
<br>
<br>
</div>
</body>
</html>
Producción:
Cuadro de transparencia y transparencia con valores RGBA: en el cuadro de transparencia, la propiedad secundaria hereda la propiedad de la propiedad principal, pero en el caso de la transparencia con RGBA, solo se usa o aplica la propiedad de opacidad para agregar transparencia al fondo de un elemento.
Ejemplo: este ejemplo describe la propiedad de opacidad aplicando transparencia utilizando valores RGBA.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Transparent box</title>
<style>
.geeks {
background: rgb(0, 153, 0);
padding: 15px;
text-align: center;
width: 300px;
}
#geek {
padding: 15px;
text-align: center;
width: 300px;
}
.rgba1 {
background: rgba(0, 153, 0, 0.1);
}
.rgba2 {
background: rgba(0, 153, 0, 0.5);
}
.rgba3 {
background: rgba(0, 153, 0, 0.8);
}
.rgba4 {
background: rgba(0, 153, 0, 1.0);
}
.g1 {
float: left;
margin-left: 50px;
}
.g2 {
margin-top: -40px;
margin-left: 50px;
float: left;
}
</style>
</head>
<body>
<div class="g1">
<p style="font-size:24px;font-weight:bold;">Transparent Box</p>
<div class="geeks" style="opacity:0.1;">
<p>10% opacity</p>
</div>
<div class="geeks" style="opacity:0.5;">
<p>50% opacity</p>
</div>
<div class="geeks" style="opacity:0.8;">
<p>80% opacity</p>
</div>
<div class="geeks">
<p>100% opacity</p>
</div>
</div>
<br>
<br>
<div class="g2">
<p style="font-size:24px;font-weight:bold;">RGBA color values</p>
<div class="rgba1" id="geek">
<p>10% opacity</p>
</div>
<div class="rgba2" id="geek">
<p>50% opacity</p>
</div>
<div class="rgba3" id="geek">
<p>80% opacity</p>
</div>
<div class="rgba4" id="geek">
<p>100% opacity</p>
</div>
</div>
</body>
</html>
Producción:
Texto en cuadro transparente: la propiedad de opacidad se puede usar para disminuir o aumentar la opacidad de un cuadro y poner texto dentro para hacer las publicaciones más notorias.
Ejemplo: Este ejemplo describe la propiedad de opacidad colocando el texto en un cuadro transparente.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div.bg {
background: url(
"https: //media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png");
width: 550px;
height: 300px;
border: 1px solid;
}
div.box {
margin: 50px 20px;
text-align: center;
width: 500px;
height: 150px;
background-color: #000000;
border: 3px solid white;
opacity: 0.7;
}
div.box p {
margin: 5%;
font-family: Arial;
color: #009900;
font-weight: bold;
font-size: 25px;
}
</style>
</head>
<body>
<div class="bg">
<div class="box">
<p>GeeksforGeeks</p>
</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome 1.0
- Microsoft Edge 12.0
- Internet Explorer 9.0
- Firefox 1.0
- Ópera 9.0
- Safari 2.0
Publicación traducida automáticamente
Artículo escrito por AnkanDas22 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA