Opacidad/transparencia de CSS
opacity El atributo especifica la opacidad/transparencia del elemento.
imagen transparente
opacity El rango de valores del atributo es de 0.0 a 1.0. Cuanto más bajo sea el valor, más transparente será:
opacity 0.2
opacity 0.5
opacity 1
Ejemplo
img {
opacity: 0.5;
}
efecto de transparencia al pasar el mouse
opacity El atributo generalmente se usa con :hover Al combinar con selectores, podemos cambiar la opacidad al pasar el mouse:
Ejemplo
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
Explicación del ejemplo
El primer bloque de CSS es similar al código del ejemplo 1. Además, también hemos agregado un efecto cuando el usuario pasa el mouse sobre una de las imágenes. En este caso, cuando el usuario pasa el mouse sobre la imagen, queremos que la imagen sea opaca. Este CSS es opacity:1;.
Cuando el puntero del ratón sale de la imagen, la imagen volverá a ser transparente.
Ejemplo de efecto de desplazamiento inverso:
Ejemplo
img:hover {
opacity: 0.5;
}
Caja transparente
Usar opacity Cuando se aplica la propiedad de opacidad a un elemento, todos sus elementos hijos heredan la misma opacidad. Esto puede hacer que el texto dentro de un elemento completamente transparente sea difícil de leer:
Ejemplo
div {
opacity: 0.3;
}
Transparencia usando RGBA
Si no deseas aplicar opacidad a los elementos hijos, como en el ejemplo anterior, utiliza valores de color RGBA. En el siguiente ejemplo, se establece el color de fondo en lugar de la opacidad del texto:
Ya has aprendido de nuestros CSS 颜色 En este capítulo, aprendiste cómo usar RGB como valor de color. Además de RGB, también se puede usar el valor del color RGB con el canal alpha (RGBA) - este canal especifica la opacidad del color.
El valor del color RGBA se especifica como: rgba(red, green, blue, alpha)。 alpha Los parámetros son números entre 0.0 (completamente transparente) y 1.0 (completamente opaco).
Consejo:En nuestro CSS 颜色 En este capítulo, aprenderás más sobre los colores RGBA.
Ejemplo
div {
background: rgba(76, 175, 80, 0.3) /* Desenfoque del 30% de fondo verde */
}
Texto dentro de la caja transparente
Este es un texto situado dentro de una caja transparente.
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>Este es un texto ubicado en un cuadro transparente.</p>
</div>
</div>
</body>
</html>
Explicación del ejemplo
Primero, creamos un elemento <div> con imagen de fondo y borde (class="background").
Luego, creamos otro <div> (class="transbox") dentro del primer <div>.
<div class="transbox"> tiene color de fondo y borde - este div es transparente.
Dentro de un <div> transparente, hemos añadido algunos textos en el elemento <p>.
