Cómo lograr transparencia y opacidad de imágenes en css (código completo)
El contenido de este artículo trata sobre cómo lograr transparencia y opacidad de imágenes en CSS (código completo). Tiene cierto valor de referencia. Los amigos que lo necesiten pueden consultarlo. usted.ayuda.
1. El elemento de opacidad se utiliza para hacer que la imagen sea transparente y opaca. El valor es de 0 a 1. Generalmente, 0,4 o 0,6 es suficiente.
El método de escritura para navegadores inferiores a 2.ie8 es: filter:alpha(opacity=40); el valor es de 0 a 100. Generalmente, se escriben dos tipos al mismo tiempo por compatibilidad.
3. Hay dos formas de usarlo. La primera es escribir directamente sobre la imagen para aumentar el desenfoque de la imagen (equivalente a una máscara gris). fondo p, y escriba la p anidada con máscara de color, también puede agregar texto dentro. El método de escritura específico es el siguiente:
img{
ancho:400px;
alto:300px; p>
opacidad:0.4;
filtro:alfa(opacidad=40);
}
img:hover{
opacidad:1 ;
filtro:alfa(opacidad=100);/*ie8 abajo*/
}
.fondo{
fondo :url('img/t01753ed63dad21cb88.jpg') sin repetición;
ancho:400px;
alto:300px;
} p>
.transparent{
ancho:400px;
alto:300px;
color-de fondo:#f941f3;
opacidad: 0,4;
filtro:alfa(opacidad=40);
}
.transparent:hover{
opacidad: 0;
filtro:alfa(opacidad=0);
}
p{
tamaño de fuente:48px; p>
display:bloque;
color:blanco;
text-align:center;
line-height:300px;
}
filtro:alfa
Efecto de operación:
Nota:
1. Utilice pseudoclase:hover para establecer la transparencia cuando el mouse se mueve sobre la imagen.
2. Al escribir una imagen de fondo en un div, la altura predeterminada es 0. La altura debe limitarse para mostrar el tamaño completo de la imagen.