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 636
    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 276
    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 636
    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 334
    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 648
    J'aime reçus:
    1
  6. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 276
    J'aime reçus:
    0
    je mets les 2 dans mes CSS
     
  7. Robinson
    Robinson WRInaute passionné
    Inscrit:
    26 Octobre 2005
    Messages:
    1 636
    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 et animer un forum Demandes d'avis et de conseils sur vos sites 21 Novembre 2021
WordPress Créer et maintenir un thème vs Site Builder avec thème tout fait Développement d'un site Web ou d'une appli mobile 29 Octobre 2021
Créer 2 landing pages ou une seule ? Débuter en référencement 8 Juin 2021
Comment créer un PBN ? Netlinking, backlinks, liens et redirections 31 Mai 2021
Creer un site ecommerce Débuter en référencement 20 Mai 2021
Créer un fichier audio pour les articles Demandes d'avis et de conseils sur vos sites 2 Mai 2021
Search Console Créer des sitemap avec les redirections 301 Netlinking, backlinks, liens et redirections 14 Avril 2021
Créer un compte google my business pour un tiers YouTube, Google Images et Google Maps 20 Février 2021
Astuce Créer et programmer une diffusion en direct sur mobile Développement d'un site Web ou d'une appli mobile 17 Novembre 2020
Impossible de créer un nom d'utilisateur sur ma page FB Facebook 26 Octobre 2020
Faut-il créer un sitemap mobile ? Crawl et indexation Google, sitemaps 6 Octobre 2020
créer un nouveau site ou améliorer l'ancien ? Débuter en référencement 25 Août 2020
Créer une page ou une rubrique "citation", bonne idée ? Débuter en référencement 21 Juin 2020
Créer un article annuaire avec liens externes Débuter en référencement 11 Juin 2020
Comment créer des URL propres pour les pages résultats Problèmes de référencement spécifiques à vos sites 19 Avril 2020
E-commerce: Créer un collection sans l'intégrer sur la page d'accueil Débuter en référencement 3 Avril 2020
WordPress Créer un sitemap simple pour Google Débuter en référencement 9 Mars 2020
Supprimer un site pour créer une copie = risque de "duplicate" ? Crawl et indexation Google, sitemaps 1 Mars 2020
WordPress Créer un site miroir Débuter en référencement 27 Février 2020
Créer un ecommerce pour un client avec Wix ou Prestashop ? e-commerce 7 Novembre 2019