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: filtro: alfa (opacidad = 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 la p anidada está escrita con máscara de color, también puede agregar texto dentro.
El método de escritura específico es el siguiente:
lt; !DOCTYPE htmlgt;
lt; htmlgt; lt; meta conjunto de caracteres ="utf-8"gt;
lt; estilogt;
img{
ancho:
altura: 300px;
Opacidad: 0,4;
filtro: alfa(opacidad=40);
}
img: hover{
opacidad: 1;
filtro: alfa(opacidad=100);/*escrito debajo, es decir,8*/
}
. fondo{
fondo: url('img/t01753ed63dad21cb88.jpg') sin repetición;
ancho: 400 px;
alto: 300 px; >
}
.transparent{
ancho: 400px;
alto: 300px;
color de fondo: #f941f3;
opacidad: 0,4;
filtro: alfa(opacidad=40);
}
.transparent: flotar{
opacidad: 0;
filtro: alfa(opacidad=0
}
p{
fuente); -tamaño: 48px ;
pantalla: bloque
color: blanco
alineación de texto: centro
altura de línea; : 300px;
}
lt;/stylegt;
lt;/headgt;
lt;bodygt;
lt ;img src="img/t010c6ea3d87e5dcc351.jpg"/gt;
lt;div class="fondo"gt;
lt;div class="transparente" gt;
lt; p>
lt;pgt;filter:alphalt;/pgt;
lt;/divgt;
lt;/divgt ;
lt;/ bodygt;
lt; /htmlgt; Efecto de ejecución:
Nota:
1. coloque el cursor 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.