Sujet Précédent Sujet Suivant

CSS/ rendre uniquement le background transparant

Résolu/Fermé
Mouslim02 Messages postés 318 Date d'inscription lundi 28 juillet 2014 Statut Membre Dernière intervention 4 juin 2015 - 20 août 2014 à 18:39
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 20 août 2014 à 19:36
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

A voir également:

3 réponses

Réponse 1 / 3
Lerendra Messages postés 408 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
20 août 2014 à 18:58
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
Mouslim02 Messages postés 318 Date d'inscription lundi 28 juillet 2014 Statut Membre Dernière intervention 4 juin 2015 11
20 août 2014 à 19:11
lerendra
c'est exactement ce que je voulais
je trouve même pas quoi vous dire :D
franchement un grand MERCI
0
Réponse 2 / 3
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 20/08/2014 à 18:53
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
Mouslim02 Messages postés 318 Date d'inscription lundi 28 juillet 2014 Statut Membre Dernière intervention 4 juin 2015 11
20 août 2014 à 19:17
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
Lerendra Messages postés 408 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
20 août 2014 à 19:19
Vas y ! si tu as d'autre question, je suis là. N'hésite pas !
0
Mouslim02 Messages postés 318 Date d'inscription lundi 28 juillet 2014 Statut Membre Dernière intervention 4 juin 2015 11
20 août 2014 à 19:29
re lerendra
oui la voila https://forums.commentcamarche.net/forum/affich-30685640-rendre-une-partie-d-image-transparente#p3068564
si vous pouvez m'aider ça serait super sinon ça reste super comme même ;)
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
20 août 2014 à 19:33
si c'est une couleur rgba
si c'est une image png

Gimp (logiciel image gratuit) peut générer du png transparent
0
Réponse 3 / 3
Utilisateur anonyme
20 août 2014 à 19:01
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
Utilisateur anonyme
20 août 2014 à 19:02
ha ben tu as déjà des réponses identique :D
0
Lerendra Messages postés 408 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
20 août 2014 à 19:08
Aha ! :DJe me suis vraiment compliqué dans ma réponse à refaire tout le code XD. :p
0
Mouslim02 Messages postés 318 Date d'inscription lundi 28 juillet 2014 Statut Membre Dernière intervention 4 juin 2015 11
20 août 2014 à 19:31
lobotofix jte remercie comme même :)
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
20 août 2014 à 19:36
ha ha il y en a qui a dégainé avant l'autre !!!!
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
rendre un texte flou plus net
lulubidon -
m00kka -

3 réponses
Task host windows, c'est quoi ?
mat -
bebegamin59 -

23 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse