Cómo usar CSS para lograr un efecto de capa de máscara semitransparente
1. Para efectos translúcidos, puede usar el atributo de opacidad en css3 y usar el filtro alfa de IE en versiones inferiores de los navegadores IE.
Código:
.opacidad{
opacidad:0.3; filtro: alfa(opacidad=30); color de fondo:#000
2
p>
2
p>La forma habitual de cubrir toda el área visible es:
html,body{ height:100%}
. mask{height:100%;width: 100%;}
Sin embargo, cuando el contenido excede una pantalla, solo el efecto de visualización en IE6 es lo que esperamos. En otros navegadores, el contenido debajo de la primera pantalla. no se puede cubrir, para ser compatible con otros navegadores, podemos usar position:fixed
Para resolver este problema
Código completo:
<. p>html,body{ altura:100%; margen:0;
.mask{altura; :100%;
ancho:100 %; posición:fija; _posición:absoluta; índice z:1000;
.opacidad{ opacidad:0.3; : alfa(opacidad=30); color de fondo:#000 ;
}?
Darle un ejemplo: ?
?
?charset="gb2312"?/>?
?
?
?class="ph">place?holder?height:1000px;&l t;/p>? opacidad">
El fondo es semitransparente y cubre toda el área visible
??
Este efecto está en el trabajo A menudo encontrado, este artículo presenta principalmente cómo lograr compatibilidad con múltiples navegadores cuando el contenido excede una pantalla. ?Veamos cómo implementarlo a través de un ejemplo simple. Expertos, por favor desvíense. ?
¿El código html es muy simple?
v?>
?1. Para un efecto translúcido, puedes usar opacidad en css3.
atributo, utilice el filtro alfa de IE en versiones inferiores de los navegadores IE.
Código:?
.opacity{?opacity:0.3;?
filtro:?alpha(opacity=30);?background-color:#000;?}< /code>?
??2? La forma habitual de cubrir toda el área visible es:?
?
? html,cuerpo{?
altura:100%}??
?
.mask{altura:100%;ancho:100 % ;}?
?
Pero cuando el contenido excede una pantalla, solo el efecto de visualización en IE6 es lo que esperamos. En otros navegadores, el efecto de visualización debajo de la primera pantalla. no se puede cubrir Para ser compatible con otros navegadores, podemos usar position:fixed;?
para resolver este problema?
?
?
Código completo:?
?html,body{?height:100 % ;?
margin:0;?padding:0}?
.mask{height:100%;?width:100%;?position:fixed;?
_position:absolute;?top:0;?z-index:1000;?}?
.opacity{?opacity:0.3;?filter:?
alfa ( opacidad=30);?color de fondo:#000;?}?
?
Referencias:
Varias formas de lograr el centrado vertical
?