Cuando estamos haciendo proyectos del lado de la PC, a menudo encontramos la necesidad de fondos transparentes e imágenes transparentes, pero a menudo hay muchos problemas con la transparencia, especialmente si el contenido transparente de fondo es opaco, es más problemático ser compatible con todos los navegadores.
¿Cómo lograr un fondo transparente y un texto opaco, compatible con todos los navegadores?
De hecho, lo que solemos decir acerca de ajustar la transparencia es en realidad ajustar la opacidad en el estilo, como se muestra a continuación:
Abrir ps, en el panel de capas, puede ver el menú de configuración-opacidad de ajuste de capa, desde 0% (completamente transparente) a 100% (opaco)
Por lo general, hay tres formas de lograr un estilo CSS transparente. El siguiente es el método de escritura con una opacidad del 50%.
- Para css3
opacity:value,valueel valor varía de 0 a 1, como opacidad: 0.5 - Para css3
rgba(red, green, blue, alpha),alphael valor de (transparencia) varía de 0 a 1, comorgba(255,255,255,0.5) - Filtro exclusivo de IE
filter:Alpha(opacity=value),valueel valor varía de 0 a 100, comofilter:Alpha(opacity=50)
Expliquemos uno a uno:
1. La opacidad de Css3
Compatibilidad: la opacidad de Css3 no es compatible con versiones inferiores de IE, no es compatible con IE6 / 7/8 y es compatible con IE9 y superior
opacitySituación aplicable: opacityno solo los elementos del conjunto son transparentes, los elementos descendientes también serán heredados opacity, y también tienen efectos de transparencia, por lo que opacitygeneralmente se utilizan para ajustar la transparencia de imágenes individuales o algunos módulos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin: 0;
}
.content{
width: 200px;
height: 100px;
padding: 50px 50px;
background-color: red;
opacity: 0.5;
/* 设置不透明度50% */
}
p{
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="content">
<p>背景透明,内容也透明</p>
</div>
</body>
</html>
Después de su uso opacity, todo el módulo es transparente, como se muestra a continuación:
Entonces el uso de la opacityrealización (fondo transparente, texto opaco) es imposible.
2. rgba de css3
Compatibilidad: IE6, 7, 8 no son compatibles, IE9 y versiones superiores y todos los navegadores estándar son compatibles
Instrucciones de uso: Establezca la transparencia del color, siempre que se utilice el color establecido.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin: 0;
}
.content{
width: 200px;
height: 100px;
padding: 50px 50px;
background-color: rgba(255, 0, 0, 0.5);
/* 用rgba设置背景透明，内容不会受影响 */
}
p{
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="content">
<p>背景透明,内容也透明</p>
</div>
</body>
</html>
El efecto que queremos
El efecto que queremos
Visualización de error de IE 6, 7, 8rgba
Entonces rgba puede establecer el efecto que queremos, pero hay compatibilidad. IE6, 7, 8 configuración rgba se mostrará incorrectamente y no se puede reconocer, pero hay filtros exclusivos de IE filter:Alpha(opacity=x), podemos echar un vistazo juntos.
3. Filtro de filtro exclusivo de IE: Alfa (opacidad = x)
Instrucciones de uso: el navegador IE es exclusivo, hay muchos problemas, este artículo toma como ejemplo la configuración de la transparencia del fondo, de la siguiente manera:
- Solo es compatible con IE6, 7, 8, 9 y se eliminó en IE10
- En IE6 y 7, debe activar la propiedad haslayout de IE (por ejemplo: * zoom: 1 o * overflow: hidden) para que comprenda el filtro: Alfa
- En IE6, 7 y 8, el filtro: el elemento Alpha está configurado y el elemento principal está configurado en position: static (atributo predeterminado), y sus elementos secundarios están relativamente posicionados, lo que puede hacer que los elementos secundarios sean opacos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin: 0;
}
.content{
width: 200px;
height: 100px;
padding: 50px 50px;
background-color: red;
filter:Alpha(opacity=50);
/* 只支持IE6、7、8、9 */
position:static;
/* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
*zoom:1;
/* 激活IE6、7的haslayout属性，让它读懂Alpha */
}
p{
width: 100px;
height: 100px;
background: green;
position: relative;
}
</style>
</head>
<body>
<div class="content">
<p>背景透明,内容也透明</p>
</div>
</body>
</html>
IE6, 7, 8 puede reconocer el filtro de filtro
La versión IE10 se eliminó y IE10 y superiores no se reconocen
4. Una solución transparente y totalmente compatible
Del análisis anterior, sabemos que configurar el contenido de fondo transparente para que sea opaco y las propiedades disponibles son los filtros exclusivos de rgba e IE.filter:Alpha
Para los navegadores IE6, 7 y 8, podemos usar el filtro fiter. Para los navegadores estándar, usamos rgba. Entonces, el problema es que el navegador IE9 admite ambos atributos. Usarlos juntos reducirá repetidamente la opacidad. Entonces, cómo solo fiter:Alpha¿Cómo usar IE6 , 7, 8? Podemos usar CssHack para configurar hacks relacionados con IE para encontrar formas de admitir solo IE 6, 7 y 8.
/* 只支持IE6、7、8 */
@media \0screen\,screen\9 {...}Se han resuelto todos los problemas de transparencia, y el código completo es el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin: 0;
}
.content{
width: 200px;
height: 100px;
padding: 50px 50px;
background-color: rgba(255, 0, 0, 0.5);
}
p{
width: 100px;
height: 100px;
background: green;
}
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */
.content{
background-color:red;
filter:Alpha(opacity=50);
position:static;
/* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
*zoom:1;
/* 激活IE6、7的haslayout属性，让它读懂Alpha */
}
.content p{
position: relative;
/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
}
}
</style>
</head>
<body>
<div class="content">
<p>背景透明,内容也透明</p>
</div>
</body>
</html>