css - interactivo - html banner text

¿Cómo atenuar tu página web para centrar tu atención en un banner?(efectos dim-bright en tu página web)

Question

Me preguntaba cómo se crea este efecto en ciertas páginas web:

Al cargar la página web, un anuncio publicitario con un botón de cierre se muestra como la capa superior, y la página web real se muestra como la capa inferior; La página web está completamente atenuada, de modo que el foco de atención cae naturalmente en el anuncio publicitario con el botón de cerrar. Y al hacer clic en este botón de cierre en el anuncio, la página web real se muestra inmediatamente, pero ahora, vuelve a su brillo original.

Bueno, eso fue solo un ejemplo, sé que tales prácticas de mostrar anuncios son molestas.

Y mi pregunta aquí es: ¿Cómo obtienes ese efecto tenue y brillante en tu página web?

PD:

1. Sé sobre el índice z en css, así que solo necesito saber la parte de regulación.
2. Estoy buscando una solución basada en css (o reformulando eso, solución sin el uso de ningún script como js), si es posible.

Gracias chicos.

Answer 1

Algo como this ? Escritura muy mínima .

HTML

<div class="overlay"></div>
<div class="overlay-message">
<p>CLICK TO CLOSE</p>
</div>

jQuery

$(document).ready(function() {
$(".overlay, .overlay-message").show();
$(".overlay-message").click(function() {
$(".overlay, .overlay-message").hide();
});
});

CSS

.overlay {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color:#fff;
opacity:0.8;
z-index:1001;
}
.overlay-message{
position: fixed;
top:30px;
left:30px;
width:400px;
height:250px;
background-color:#fff;
opacity:1;
z-index:1002;
}

Answer 2

Puede hacer esto utilizando el selector de destino en CSS y opacidad, pero ambos no están disponibles en la mayoría de los navegadores.

En su lugar, tendrá que usar javascript para que aparezca el cuadro atenuado.

Por lo general, usaría un cuadro de 100% de ancho y altura con una posición absoluta con un color de fondo que es rgba con un respaldo png transparente.

Estilizarlo así funcionará:

#dim {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: url(''semitransparent1x1.png'');
background: rgba(0, 0, 0, 0.8);
z-index:100;
}

Luego usa un poco de jQuery para mostrarlo y eliminarlo.