Création d'une superposition en CSS?

J'ai div que je montre dynamiquement lorsque certaines conditions surviennent.Création d'une superposition en CSS?

Lorsque j'affiche la div, comment puis-je créer l'effet de la gradation en arrière-plan et ma div apparaissant comme proéminent? un peu comme un certain nombre de lightboxes ou de popups AJAX. (Thickbox, ColorBox, PrettyPhoto, etc)

Je ne comprends pas comment ils le font. J'ai tout le reste de travail dans mon propre code personnalisé, sauf cette pièce.

Quelqu'un peut-il m'aider à apprendre comment?

Source

2010-12-20 Axl

Vous cherchez quelque chose de similaire à la fonction « tamiser les lumières » sur un certain nombre de sites Web? Où le contenu de la page s'assombrit et la vidéo/div reste lumineuse? Eh bien comment c'est fait en plaçant un calque invisible 100% largeur et hauteur en dessous de la div sélectionné mais au-dessus du reste du contenu de la page. Cette couche a un fond de noir et l'opacité est changée en fondu. – Brady

En cherchant dim les lumières jquery c'est un lien que j'ai trouvé: http://www.ajaxupdates.com/lights-out-dimming-covering-background- content-with-jquery/ – Brady

Placez un div sur le contenu et définissez une opacité. Je l'utilise dans un de mes sites.

<div id="error_wrapper"> 
    <div id="site_error"> 
     Error: 
    </div> 
</div> 

div#error_wrapper { 
    z-index: 100; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background-color: #000000; 
    top: 0px; 
    left: 0px; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 

} 

div#site_error { 
    position: fixed; 
    top: 200px; 
    width: 400px; 
    left: 50%; 
    margin-left: -200px; 
}

Source

2010-12-20 17:51:49

Ou 'rgba()' pour les navigateurs modernes. – jwueller

très agréable. Logique. Je pensais que ça avait quelque chose à voir avec l'opacité! J'ai été capable de l'adapter à ce que je voulais. J'apprécie l'aide. – Axl

Savez-vous comment arrondir les coins sur un div? Je peux trouver des exemples, mais ils impliquent tous l'utilisation d'images. Y a-t-il une manière pure de CSS? – Axl

Si vous créez une couche qui est la pleine largeur & hauteur de votre page et lui donner un indice z plus élevé que votre page entière, vous pouvez créer cet effet. Ensuite, mettez votre div apparaissant dessus.

Source

2010-12-20 17:52:37 fiiv

Il suffit d'utiliser div globale de la taille de la page pour couvrir tout autre contenu:

http://jsfiddle.net/CHkNd/1/

Source

2010-12-20 17:52:58

corrigez-moi si je me trompe mais de cette façon, vous pouvez toujours utiliser le contenu sur le site ci-dessous la fenêtre actuelle. Donc, si vous faites défiler vers le bas que certains contenus sont encore visibles. Mieux vaut utiliser la position fixe je pense. –

@Mark Vous avez peut-être raison, je n'ai pas accès à mon code actuel pour le moment. –

-1

Voici un exemple que vous pouvez jouer avec.

http://jsfiddle.net/r77K8/1/

Hope this helps.

Bob

Source

2010-12-20 18:11:30 rcravens

Création d'une superposition en CSS?

Répondre

Questions connexes