Comment créer un calque semi-transparent sur toute la page ?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Robinson, 29 Mars 2008.

  1. Robinson
    Robinson WRInaute passionné
    Inscrit:
    26 Octobre 2005
    Messages:
    1 661
    J'aime reçus:
    0
    Bonjour,

    Je cherche à créer un calque comme il en existe sur beaucoup de sites "pro" souvent utilisés pour afficher des photos.

    Je sais créer un calque via <div style="z-index : 2;"> et y ajouter du contenu via ajax.

    Cependant, je souhaiterai que ce calque soit composé d'un fond semi-transparent pour voir la page qui serait inaccessible sous celui-ci, et d'un cadre avec contenu html positionné à peu près au centre (ça pas de problème, je gère via top et left :p)

    Ce cadre ne me pose pas de problème mais je ne sais pas comment faire pour rendre tout le reste de la page (autour du cadre) en semi-transparence.

    J'ai bien pensé à utiliser une image semi-transparente (avec pleins de petits pixels noirs) comme fond pour la page mais ne suis pas certain que cela soit la bonne solution, de plus, je n'arrive pas à adapter le calque sur toute la largeur et hauteur de la page.

    Si vous avez une solution simple, je suis preneur merci.
     
  2. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 578
    J'aime reçus:
    0
    en utilisant la propriété opacity=nn pour mozilla et filter:alpha(opacity=nn) pour IE
     
  3. Robinson
    Robinson WRInaute passionné
    Inscrit:
    26 Octobre 2005
    Messages:
    1 661
    J'aime reçus:
    0
    Merci, je vais regarder de ce côté :)
     
  4. Michel
    Michel WRInaute passionné
    Inscrit:
    22 Décembre 2002
    Messages:
    1 357
    J'aime reçus:
    0
    Oui, j'utilise cela avec de bon résultats sous IE.

    Mais à propos, y a t-il un moyen pour que la formule fonctionne aussi bien sur IE que Mozi !? Une idée Leonick ? Merci !
     
  5. webmasterlamogere
    webmasterlamogere WRInaute passionné
    Inscrit:
    17 Décembre 2006
    Messages:
    1 656
    J'aime reçus:
    1
  6. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 578
    J'aime reçus:
    0
    je mets les 2 dans mes CSS
     
  7. Robinson
    Robinson WRInaute passionné
    Inscrit:
    26 Octobre 2005
    Messages:
    1 661
    J'aime reçus:
    0
    J'ai réussi à faire ce que je souhaitais.
    Cependant, j'ai un problème avec le calque sur la hauteur... quand la fenêtre a un menu déroulant, le calque ne s'arrête qu'à la partie visible.

    Il existe une solution pour qu'il s'adapte automatiquement ? (100% ne fonctionne pas)
    Merci.


    Edit : visiblement, il faut calculer les dimensions de la page pour adapter le calque en pixels
    Edit bis : c'est réglé, merci pour le lien webmasterlamogere, c'est exactement à ça que je pensais au début.
     
Chargement...
Similar Threads - créer calque semi Forum Date
Créer un nom d’utilisateur de Page Facebook @ Facebook Jeudi à 12:08
Créer un nouveau compte Google ads après avoir été suspendu AdWords 27 Mars 2019
À quel moment Google décide de "créer" une position 0 ? Référencement Google 26 Mars 2019
Comment créer un sitemap pas à pas ? Débuter en référencement 12 Janvier 2019
Créer une structure en silo dans WordPress : pages ou catégories ? Référencement Google 30 Octobre 2018
Créer un site temporaire ... ? Débuter en référencement 3 Octobre 2018
créer un site qui regroupe les tableaux de bords personnalisés GA de mes sites web Google Analytics 13 Juin 2018
Google sait créer un texte inédit à partir de plusieurs textes Référencement Google 19 Mai 2018
Créer des backlinks entre des sites d'artisans opérant chacun dans leur département, une bonne idée? Netlinking, backlinks, liens et redirections 19 Avril 2018
Créer des graphiques en php - Vers quel script se tourner ? Développement d'un site Web ou d'une appli mobile 19 Octobre 2017
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice