AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    [HTML] Mettre le fond d'une cellule en transparence sans affecter le contenu

    Partagez
    Minishiro
    FémininAge : 20Messages : 288

    le Lun 10 Jan 2011 - 0:12

    Bonjour, bonsoir!

    Eh oui, je poste ma première astuce! Et moi qui croyait ne jamais pouvoir en poster vu ma connaissance plus que fragmentaire en matière de code HTML et CSS. ^^

    Enfin, voilà, ce morceau de connaissance m'est venu d'une expérience personnelle, mais bon, venons-en au vif du sujet.

    Je suis sûre que plusieurs d'entre vous connaissent bien les propriétés de CSS qui permettent de mettre un objet transparent.
    Code:
    .exemple {
    -moz-opacity:0.6; (pour Firefox)
    opacity: 0.6; (pour Chrome et Safari (à vérifier))
    filter:alpha(opacity=60); (pour IE)
    }
    Qui peuvent aussi être affichées dans la propriété "style".

    Hors, quand on veut utiliser ces propriétés pour mettre un tableau en transparence, seulement pour avoir le fond transparent, on se retrouve avec un problème fort embêtant; même si notre contenu est dans un autre tableau, le voilà transparent. Quand bien même que vous mettrez vos textes et vos tableau dans des span et des div ou avec des propriétés de transparence à 100% d'opacité, rien n'y fera, votre navigateur s'obstinera à mettre le contenu de votre tableau de la même opacité que le tableau dans lequel il est disposé. Eh voilà que j'arrive à votre rescousse! (Muahahaha. x))

    En fait, c'est tout simple... Il suffit de mettre le fond de la cellule complètement transparent (par défaut ou dans le panneau de configuration (Forumactif ou autres), si c'est pour un tableau dont la couleur y est définie; dans ce cas, ne rien inscrire à la place du code hexadécimal).
    Ensuite, créez une image de la couleur que vous souhaitez voir apparaître en transparence (cela peut-être une image aussi, tout dépendant de ce que vous voulez faire) et mettez-là au niveau de transparence souhaité (la procédure dépend de votre logiciel). Ensuite, vous exportez en PNG sans entrelacement et vous placez sur votre hébergeur. Il suffit ensuite de rajouter ceci dans la balise de votre tableau :
    Code:
    <table background="url de votre image">

    En résumé : image PNG de l'opacité désirée en fond du tableau.

    Voici le rendu que j'ai eu en mettant l'intérieur du cadre de mon forum en transparence :
    Spoiler:

    Eh oui, tout ceci aurait pu être résumé en une phrase. xD Bref, en espérant que ça peut être utile à quelqu'un!

    WhiteClover



    phinolex
    MasculinAge : 17Messages : 63

    le Jeu 29 Mar 2012 - 16:29

    merci
    ShiShi_Chan
    MasculinAge : 27Messages : 51

    le Dim 20 Mai 2012 - 16:12

    merchi ^
    Plopy
    FémininAge : 24Messages : 10

    le Mar 12 Juin 2012 - 15:23

    Merci!
    Celska
    FémininAge : 21Messages : 37

    le Mar 12 Juin 2012 - 17:26

    Sunkyou ! (:



    NORTH WITCH ♒
    image de l'avatar par Fernanda Suarez (c)
    Noubil
    FémininAge : 28Messages : 56

    le Sam 7 Juil 2012 - 17:06

    Merci
    Jo-Champi
    FémininAge : 28Messages : 68

    le Mar 14 Aoû 2012 - 18:03

    Merci :)



    りん
    FémininAge : 24Messages : 73

    le Ven 31 Aoû 2012 - 21:35

    Merci ~
    Ashouille
    FémininAge : 27Messages : 47

    le Sam 22 Sep 2012 - 18:19

    Merciiiiiiiiii
    phinolex
    MasculinAge : 17Messages : 63

    le Jeu 31 Jan 2013 - 19:58

    merci du partage !
    lapinou-doux
    FémininAge : 16Messages : 56

    le Mer 6 Fév 2013 - 14:04

    Merci Very Happy
    Asunie
    FémininAge : 24Messages : 68

    le Mar 12 Fév 2013 - 11:42

    merci ! :)
    Etakine
    MasculinMessages : 17

    le Mar 2 Juil 2013 - 12:56

    Merci
    Yema
    FémininAge : 20Messages : 25

    le Lun 29 Juil 2013 - 13:04

    merci beaucoup :)
    teck
    MasculinAge : 25Messages : 63

    le Sam 19 Oct 2013 - 15:44

    merci



    Whitemoon
    FémininAge : 16Messages : 695

    le Sam 19 Oct 2013 - 15:57

    Merci ^^



    Glow
    FémininAge : 17Messages : 93

    le Mar 24 Juin 2014 - 22:26

    Merci (:
    Contenu sponsorisé

    Aujourd'hui à 7:06


      La date/heure actuelle est Dim 11 Déc 2016 - 7:06