AccueilDernières imagesRechercherS'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.

-17%
Le deal à ne pas rater :
Continental Edison TV QLED 55” (139 cm) UHD 4K 3840×2160
299.99 € 359.99 €
Voir le deal

    Fond en transparence - opacité (fond en couleur ou en image)

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Mer 14 Mai 2014 - 10:00

    Rappel du premier message :





    Faire un fond en transparence


    Je pense que le titre est assez clair pour que vous imaginiez ce que l'on veut faire, malgré tout, voilà ce que je vais vous montrer comment faire.



    Le texte ici présent est dans un div de couleur blanche, avec un fond d'opacité de 80%;


    Le texte ici présent est dans un div et a une image de fond d'opacité 60%.



    Pour une couleur


    Pour une couleur, le code est extrêmement simple! En effet, il suffit d'utiliser le fait que le background-color peut être exprimée en rgba, le a étant l'opacité de la couleur. Il suffit alors de connaître le code RGB de la couleur que l'on veut utiliser, et de lui donner comme dernier élément l'opacité que l'on veut.

    Voici donc les codes:

    Si on a accès à la feuille CSS du forum



    Dans le HTML:
    Code:
    <div class="fond_transparent_blanc">Ceci est un texte, làlàlà!</div>

    Dans le CSS:
    Code:
    .fond_transparent_blanc {
    /* N'hésitez pas à mettre d'autres style ici */
      background-color: rgba(255, 255, 255, 0.8); /* Donc 0.5 = 50%, 0.8 = 80%, etc */
    }


    Si on est membre, à poster dans un message


    Code:
    <div style="background-color: rgba(255, 255, 255, 0.8); ">Ceci est un texte, làlàlà!</div>



    Pour une image


    Pour une image, c'est un tout petit peu compliqué! En effet, on doit ajouter une div supplémentaire, et utiliser le pseudo-élément ":before". Cependant, je vais tetner de vous explique au mieux ce qui se passe ici!

    Voici déjà le code HTML:
    Code:
    <div class="conteneur"><div class="contenu">Ceci est un texte, làlàlà!.</div></div>
    Vous voyez donc qu'il y a un div qui entoure notre texte. C'est très important, car sinon, ça ne va pas marcher! La structure est, comme vous le voyez, pas très difficile: la partie la plus difficile réside vraiment dans le CSS!


    Si on a accès à la feuille CSS du forum


    Voici le code à mettre:
    Code:
    .contenteur {
      /* Le position relative permet de contrôler le positionnement absolu de l'élément before. */
      position: relative;
     /* N'oubliez pas ici de mettre la hauteur et la largeur de l'élément, ainsi que tout autre effet de style voulu! */
    }
    .contenteur:before {
      content: ""; /* Obligé de le mettre ou rien ne s'affichera */
      /* Mettre un positionnement absolu et ensuite les 4 option de positionnement (top, bottom, left et right) à 0, permet de faire en sorte que cet élément prenne toute la LARGEUR et toute la HAUTEUR de l'élément parent, dans notre cas, le contenteur! */
      position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     /* L'image de fond, bien sûr! */
      background-image: url('URL_DE_L'IMAGE_ICI');  
      /* Le z-index est la position sur l'axe des z (donc de la profondeur) de cet élément. Ici, on le met à un pour qu'il soit derrière notre contenu. */
      z-index: 1;
     /* Ici on règle l'opacité d el'image de fond. 0.8 = 80%, 0.5 = 50%, etc. */
      opacity: 0.6;
    }

    .contenu {
      /* Mettre une position est obligatoire pour utiliser le z-index. Vu qu'on ne veut pas de positionnement absolu de notre texte, on le met en relatif. */
      position: relative;
      /* On veut bien sûr notre texte au-dessus de l'image de fond, dans ce cas, on met un z-index plus grand que celui de l'élément before */
      z-index: 2;
    }


    Si on est membre, à poster dans un message :


    Il est cependant possible que vous n'ayez pas accès à la feuille de style du forum où vous voulez poster un tel élément!

    Dans ce cas il va falloir utiliser les balises style. Cependant, si vous mettez le message tel quel, vous verrez rapidement que FA prend tous les retour à la ligne en compte! Vous devez alors retirer tous les retours à la ligne.

    Voilà la façon de faire :
    Code:
    <style type="text/css"> CODE ICI SANS RETOUR À LA LIGNE</style>


    Et voilà! =D J'espère que ce tuto vous a été utile et si vous avez la moindre question, n'hésitez pas à poster ici : https://www.never-utopia.com/f177-probleme-avec-mon-code !

    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par NyoTheNeko le Mar 3 Mar 2015 - 10:20, édité 2 fois



    Maya Seiko
    Maya Seiko
    FémininAge : 31Messages : 129

    Mar 16 Déc 2014 - 17:05

    Oh thank's ^^
    Arisu
    Arisu
    FémininAge : 36Messages : 119

    Sam 10 Jan 2015 - 21:07

    Merci !
    Akina-chan
    Akina-chan
    FémininAge : 31Messages : 140

    Mer 28 Jan 2015 - 19:39

    Merci
    Luuna Solunae
    Luuna Solunae
    FémininAge : 39Messages : 21

    Mer 28 Jan 2015 - 23:14

    Merci



    Fond en transparence - opacité (fond en couleur ou en image) - Page 2 Luunasignature1
    Anazera
    Anazera
    MasculinAge : 28Messages : 37

    Mer 15 Avr 2015 - 0:42

    Merci !
    ho0thoot
    ho0thoot
    MasculinAge : 32Messages : 4

    Mer 10 Juin 2015 - 16:52

    Merci pour ça !
    SethGuex
    SethGuex
    MasculinAge : 24Messages : 7

    Dim 12 Juil 2015 - 1:42

    Sam-sam a écrit:Merci
    Ancolie
    Ancolie
    FémininAge : 26Messages : 33

    Lun 20 Juil 2015 - 14:38

    Il a l'air super ce tuto !
    Yukie
    Yukie
    FémininAge : 25Messages : 30

    Mer 12 Aoû 2015 - 18:01

    Merci ! ^^
    Enelia
    Enelia
    FémininAge : 26Messages : 31

    Mar 25 Aoû 2015 - 20:12

    Merci pour le tuto :3
    Wawi
    Wawi
    MasculinAge : 33Messages : 10

    Ven 28 Aoû 2015 - 16:09

    Merci!
    Coldness
    Coldness
    FémininAge : 21Messages : 54

    Dim 8 Nov 2015 - 17:44

    Merci !
    Elocha
    Elocha
    FémininAge : 74Messages : 255

    Dim 8 Nov 2015 - 19:14

    merci !



    eLoChA.
    yukiyuki
    yukiyuki
    FémininAge : 30Messages : 89

    Jeu 19 Nov 2015 - 21:21

    merciii
    Ju' de fruits
    Ju' de fruits
    FémininAge : 31Messages : 82

    Ven 20 Nov 2015 - 14:10

    Merci beaucoup !



    Eiv
    Eiv
    MasculinAge : 30Messages : 511

    Mer 25 Nov 2015 - 10:24

    Merci c'est parfait



    Fond en transparence - opacité (fond en couleur ou en image) - Page 2 Signautopia
    Fond en transparence - opacité (fond en couleur ou en image) - Page 2 472020userbarfanclubdelenthil
    Sestren
    Sestren
    Autre / Ne pas divulguerAge : 32Messages : 36

    Mar 19 Jan 2016 - 13:28

    Merci ! :)
    Shoki
    Shoki
    FémininAge : 23Messages : 1308

    Mar 19 Jan 2016 - 17:31

    Je connaissait déjà la méthode mais... merci quand même ! Very Happy




    Fond en transparence - opacité (fond en couleur ou en image) - Page 2 5qox
    Bully
    Bully
    FémininAge : 22Messages : 39

    Mer 27 Jan 2016 - 15:38

    Merci
    Yumeki
    Yumeki
    FémininAge : 32Messages : 147

    Mer 3 Fév 2016 - 1:28

    Merci Very Happy
    Aidden
    Aidden
    MasculinAge : 30Messages : 45

    Jeu 21 Avr 2016 - 5:04

    Merci bien !
    avatar
    Obsidienne
    FémininAge : 27Messages : 19

    Lun 2 Mai 2016 - 13:31

    Merci beaucoup pour ton tuto !
    Yukimura Esuki
    Yukimura Esuki
    MasculinAge : 28Messages : 131

    Jeu 30 Juin 2016 - 21:24

    JE VEUX CE TUTORIEL ! MERCI SENPAI !
    Sparryx
    Sparryx
    MasculinAge : 22Messages : 71

    Mer 24 Aoû 2016 - 22:47

    merci
    KimmyKinder
    KimmyKinder
    FémininAge : 23Messages : 181

    Ven 26 Aoû 2016 - 9:52

    Merci ^^
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 22:35