web-dev-qa-db-fra.com

comment assombrir votre page Web pour centrer votre attention sur une bannière? (effets de faible luminosité sur votre page Web)

Je me demandais comment cet effet est créé dans certaines pages Web:

Lors du chargement de la page Web, une bannière publicitaire avec un bouton de fermeture est affichée comme couche supérieure et la page Web réelle est affichée comme couche inférieure; la page Web est complètement grisée, de sorte que l'attention se porte naturellement sur la bannière publicitaire avec le bouton de fermeture. Et en cliquant sur ce bouton de fermeture dans l'annonce, la page Web réelle est affichée immédiatement, mais maintenant, elle retrouve sa luminosité d'origine.

Eh bien, ce n'était qu'un exemple, je sais que de telles pratiques d'affichage de publicités sont ennuyeuses.

Et ma question ici est - Comment obtenez-vous cet effet sombre et lumineux sur votre page Web?

PS:

  1. Je connais le z-index en css, donc j'ai juste besoin de connaître la partie gradation.
  2. Je recherche une solution basée sur css (ou reformulant cela, une solution sans l'utilisation de script comme js), si c'est possible.

Merci les gars.

csswebpagefadebanner
25
arun nair

Quelque chose comme this ? Script très minimal.

[~ # ~] 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;
}

.overlay {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#fff;
    opacity:0.8;
    display:block;
    z-index:1001;
}
.overlay-message{
    position: fixed;
    top:30px;
    left:30px;
    width:400px;
    height:250px;
    background-color:#eee;
    border:1px solid #000;
    opacity:1;
    z-index:1002;
    box-sizing:border-box;
    padding:100px 50px;
}

.overlay-message:hover { 
    cursor:pointer; 
}
<div class="overlay"></div>
<div class="overlay-message">
    <p>CLICK TO CLOSE</p>
</div>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<script>
$(document).ready(function() {
    $(".overlay, .overlay-message").show();
    
    $(".overlay-message").click(function() {
        $(".overlay, .overlay-message").hide();
    });
});
</script>
28
kei

Vous pouvez le faire en utilisant le sélecteur: target dans CSS et opacity, mais les deux ne sont pas disponibles dans la plupart des navigateurs.

Au lieu de cela, vous devrez utiliser javascript pour faire apparaître la boîte grisée.

Habituellement, vous utiliseriez une zone de largeur et de hauteur 100% positionnée de manière absolue avec une couleur d'arrière-plan qui est rgba avec un fallback png transparent.

Le styliser comme ceci fonctionnera:

#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;
}

Ensuite, utilisez un jQuery simple pour l'afficher et le supprimer.

4
Rich Bradshaw