¡Ayuda para obtener puntuaciones altas! Hice una imagen y la guardé en formato png. La configuración del fondo es transparente. ¿Por qué la subí a mi sitio web y el efecto se volvió irregular?
Las imágenes PNG pueden expresar colores más coloridos. Algunas imágenes e íconos comunes con efectos vectoriales están en formato png. Sin embargo, las imágenes en formato png con fondos transparentes no son transparentes en IE6. La parte del fondo transparente mostrará #DBEAED. gris claro y el efecto de rendimiento es muy malo. Para usar la imagen de fondo transparente, la única forma es usar el formato gif, pero el formato gif tendrá efectos irregulares obvios, por lo que la única forma de solucionar este problema en IE6. es intentar arreglarlo. La solución es utilizar el filtro Microsoft.AlphaImageLoader de IE.
Si desea utilizar una imagen en formato png como fondo de un elemento DOM, puede utilizar un filtro para cargar la imagen png
.png{
fondo: url( /angel.png) sin repetición !importante;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/angel.png"); p>fondo:ninguno ;
ancho:100px;
alto:100px;
}
Código HTML:
El código anterior utiliza algunos IE Hacks, IE7, IE8, Firefox aplica directamente _fondo e IE6 aplicará el filtro.
------------------------------------------- ----------------------------
Utilizar las características transparentes o semitransparentes de las imágenes PNG puede hacer Muy hermosa página web por venir. Firefox y Opera admiten muy bien PNG, pero IE ignora la "existencia" de imágenes PNG. Aunque IE7 ya lo admite, ambos IE6 aún no pueden. Verifiqué cierta información y básicamente resolví este problema.
Aunque existen programas JS que permiten que IE6 admita fondos transparentes PNG, no son muy convenientes. Es mejor usar CSS para lograrlo. Lo que se utiliza es:
Filtro AlphaImageLoader de IE5.5+
Sintaxis:
filtro: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=bEnabled, sizingMethod =sTamaño , src=sURL )
Propiedades:
habilitado: Opcional. Booleano. Establece o recupera si el filtro está activo. verdadero | falso
verdadero: valor predeterminado. Filtro activado.
false: el filtro está deshabilitado.
Método de dimensionamiento: Opcional. Cadena. Establece o recupera cómo se muestra la imagen del objeto filtrado dentro de los límites del contenedor de objetos. crop: Recorta la imagen para ajustarla a las dimensiones del objeto.
imagen: Valor predeterminado. Aumente o disminuya los límites de tamaño del objeto para que se ajuste a las dimensiones de la imagen.
escala: escala la imagen para que se ajuste dentro de los límites de tamaño del objeto.
src: requerido. Cadena. Especifique la imagen de fondo utilizando una dirección URL absoluta o relativa. Si se omite este parámetro, el filtro no tendrá ningún efecto.
Descripción:
Muestra una imagen entre el fondo y el contenido del objeto dentro de los límites del contenedor del objeto. Y proporcione operaciones para cortar y cambiar el tamaño de esta imagen. Si se carga el formato PNG (Portable Network Graphics), también se proporciona una transparencia del 0% al 100%.
La transparencia de las imágenes en formato PNG (Portable Network Graphics) no impide seleccionar texto. En otras palabras, puedes optar por mostrar el contenido detrás del área completamente transparente de la imagen en formato PNG (Portable Network Graphics).
Después de comprender el contenido anterior, puede escribir un código CSS simple (aún no es un código completamente correcto):
#div1 {
height: 600px <; /p>
ancho: 260px;
relleno: 20px;
repetición de fondo: repetir
filtro: progid:DXImageTransform.Microsoft. (enabled=true, sizingMethod=scale, src="bj1.png"
}
Este código CSS simple puede mostrar un fondo transparente PNG normalmente en IE. Sin embargo, encontrará que el fondo no aparece en FF Análisis de los motivos:
El filtro AlphaImageLoader solo puede ser compatible con IE, y FF no admite este filtro
A veces, al escribir por primera vez. tiempo Mucha gente hará esto:
Agregue un párrafo de este tipo al código: imagen de fondo: url(bj1.png);
Aunque agregar un fragmento de código de este tipo puede resolver el Problema en FF, IE tiene otro problema: el nuevo fondo cubrirá el fondo del filtro, lo que hará que la visualización del filtro no sea válida. En este momento, se utilizan diferentes características de lectura de CSS entre IE y FF:
Firefox, Opera y otros navegadores que admiten totalmente imágenes transparentes PNG también admiten el subselector (>), pero IE no lo reconoce (incluido IE7), por lo que podemos usarlo para definir el estilo de las imágenes PNG. en Firefox, Opera y otros navegadores, el código es el siguiente:
html>body #div1 {
background-repeat: repetir;fondo-image: url(bj1.png. );
}
Al mismo tiempo, definimos el filtro en el navegador IE mediante el carácter comodín (*) que solo es reconocido por IE. El código es el siguiente:
* #div1 {filtro: progid:DXImageTransform.Microsoft.AlphaImageLoader (habilitado=true, sizingMethod=scale, src="bj1.png")
}
Y #div1 {} coloca algunas configuraciones para IE y FF*** Reducir el tamaño del archivo de código.
El resultado final es este:
#div1 {
altura: 600px;
ancho: 260px;
relleno: 20px;
repetición de fondo: repetir;
}
/* para ie7 ff*/
html>cuerpo #div1 {
fondo:url(../images/menu1.png) sin repetición;
}
/* para ie6 */
* #div1 {
fondo:none;
filtro:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/menu1.png', sizingMethod='crop');
}
Cabe señalar que el filtro AlphaImageLoader hará que los enlaces y botones en esta área no sean válidos. La solución es agregar: posición: relativa al enlace o botón. hacerlo relativo. AlphaImageLoader no puede establecer la repetición del fondo, por lo que existen requisitos de precisión muy altos para la precisión del corte de imágenes.
------------------------------------------- -----------------------
Si insertas una imagen png directamente en la página web y quieres hacerla transparente, simplemente agregue el siguiente código js, todas las imágenes PNG insertadas directamente en toda la página pueden ser transparentes:
-------------------------------------- --- ----------------------------------
Si quieres usar png para hacer que el fondo sea transparente, necesitas usar filtros y trucos CSS:
html>body .png { background:url(1.png); width:300px height:100px; 1px;}
/* ie6 */* html .png { filtro: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='1.png');
fondo: ninguno; ancho: 300 px; alto: 100 px; borde: #000 sólido 1 px;}