CSS/ rendre uniquement le background transparant

Résolu
Mouslim02 Messages postés 342 Statut Membre -  
animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

je suis en train de faire un site, et quand je cré une balise div et que je lui met le background avec par example la couleur blue et que je met du texte et des images, normal pas de probleme
mais quand je met "opacity : 0.6", le background deviens transparent mais aussi les images et le texte
je voudrais seulement que l'arriere plan devien transparant et que les images et texte reste intactes
merci de votre aide les amis

3 réponses

  1. Lerendra Messages postés 553 Statut Membre 299
     
    Bonjour

    D'après ce que je lis, ton code dois ressembler à sa :

    FICHIER HTML
    <div class="block"> 
    <p> Mes vacances en image </p>
    <img src="Image1.png" alt="image1" />
    <img src="Image1.png" alt="image1" />
    <p> Je suis une ligne </p>
    </div>


    FICHIER CSS
    .block
    {
    Background-color: blue;
    opacity: 0.6;
    }


    Le problème est que tu englobes dans la div "block" les images et le texte. Du coup, tout est prit en compte.

    Essaye :

    FICHIER HTML
    <div class="block"> 
    <p> Mes vacances en image </p>
    <img src="Image1.png" alt="image1" />
    <img src="Image1.png" alt="image1" />
    <p> Je suis une ligne </p>


    FICHIER CSS
    .block
    {
    background-color: rgba(0, 0, 255, 0.6);
    }


    Tient moi au courant ! :)
    Lerendra
    2
    1. Mouslim02 Messages postés 342 Statut Membre 30
       
      lerendra
      c'est exactement ce que je voulais
      je trouve même pas quoi vous dire :D
      franchement un grand MERCI
      0
  2. animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   738
     
    salut

    impossible a faire avec un seul div ou meme avec un div enfant de meme taille que le parent car opacity se transmet à l'enfant

    la solution

    un div avec ton background opaque
    un div en position absolute sans background qui se place par dessus

    sinon tu utilise un background en png semi transparent

    Un petit merci vaut mieux qu'une grande ignorance !
    Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
    1
    1. Mouslim02 Messages postés 342 Statut Membre 30
       
      animostab
      emmm donc l'opacité se transmet a l'enfant, bonne info
      je ne sais pas comment utiliser un png semi transparent, mais j'aimerais aprendre la transparence sur png, vous avez l'air de vous y connaitre, donc je vais poser une nouvelle question
      si vous pouvez m'aider ça serait super
      sinon toi et lerendra merci bcp pour votre aide
      0
    2. Lerendra Messages postés 553 Statut Membre 299
       
      Vas y ! si tu as d'autre question, je suis là. N'hésite pas !
      0
    3. animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   738
       
      si c'est une couleur rgba
      si c'est une image png

      Gimp (logiciel image gratuit) peut générer du png transparent
      0
  3. Utilisateur anonyme
     
    Salut, si c'est une couleur de fonds essaye d'utiliser rgba

    body {
    	background-color: rgba(0,0,255, 0.3);
    	}
    


    le 0.3 à la fin c'est l'opacité (1 = opaque, 0 transparent)

    bonne soirée
    1
    1. Utilisateur anonyme
       
      ha ben tu as déjà des réponses identique :D
      0
    2. Lerendra Messages postés 553 Statut Membre 299
       
      Aha ! :DJe me suis vraiment compliqué dans ma réponse à refaire tout le code XD. :p
      0
    3. Mouslim02 Messages postés 342 Statut Membre 30
       
      lobotofix jte remercie comme même :)
      0
    4. animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   738
       
      ha ha il y en a qui a dégainé avant l'autre !!!!
      0