18010 sujets

Questions générales et questions de débutants

[résolu]Problème avec les transparences images png et gif

Bonjour, bonsoir, à toutes et à tous,

J'ai eu beau chercher toute la nuit pas possible de trouver une solution.
Alors mon problème c'est que je désire coller en bas à droite de mes news un logo correspondant à la news publiée.
Cette image avec un fond transparent recouvre trois bloc et j'aimerais qu'on voit ces blocs sous l'image.

J'ai d'autres images avec transparences sur le site et aucun problème avec celles-là.

Je vous post des extraits de mon code et une image de mon soucis.
Bien évidemment j'ai cocher "transparence" lors de l’enregistrement de mes fichiers.
J'ai utilisé Photoshop et GIMP même soucis avec les deux.


		</header>
		<section id="main">
			<section id="menudroite">
				<aside id="recrutement">
					<h1>Recrutement :</h1>
					<ul>
						<li>Wildstar: ON</li>
						<li>League of Legends: ON</li>
						<li>Counter-Strike Global Offensive: ON</li>
					</ul>
				</aside>
				<aside id="contacter">
					<h1>Nous contacter:</h1>
					<ul>
						<li>- mIRC : #Aspik@irc.quakenet.org</li>
						<li>- Youtube: Aspik Mg</li>
						<li>- Facebook: Aspikmg</li>
						<li>- Twitter: #ASpikMG</li>
					</ul> 
				</aside>
			</section>
			<section id="news">
				<section class="structure">
					<article>
						<h1>Bienvenue sur Aspik Multigaming !</h1><em> le 02 mai 2014.</em>
						<p class="first">Le site ouvre tout juste ses portes, le tout un peu précipitamment pour coller avec l'ouverture de Wildstar. Tout se met tranquillement en place les principaux responsable de sections sont trouvés!</p>
						<p>Le site ouvre tout juste ses portes, le tout un peu précipitamment pour coller avec l'ouverture de Wildstar. Tout se met tranquillement en place les principaux responsable de sections sont trouvés!</p>
					</article>
					<img src="images/logoaspikmg-100.png" class="logonews" alt="Logo Aspik.mg"/>
				</section>
				<section class="csgo">
					<article>
						<h1>La line-Up CS:GO recrute !</h1><em> le 05 mai 2014.</em>
						<p class="first">C'est avec plaisir que nous vous annonçons l'ouverture des candidatures pour un poste dans notre line-up. Venez avec moi nous allons faire le tour des démarches à suivre [langue]</p>
						<p>Tout d'abord, nous souhaitons des gens matures, qui ne gueulent pas à tout bout de champs. De plus vous devez posséder de bonnes connaissances dans le jeux compétitif, ainsi que CS:GO. Majeur de préférence, vous avez un connexion stable à internet et un micro.</p>
					</article>
					<img src="images/logowildstar.gif" class="logonews" alt="Logo Wildstar"/>
				</section>
			</section>
		</section>




#news section {
	display: block;
	position: relative;
	margin: 10px;
	margin-right: 26%;
	padding: 20px;
	border-radius: 12px;
	background-color: grey;
	box-shadow: 1px 1px 0px black;
	overflow: auto;
}
#news section img.logonews {
	position: absolute;
	bottom: 5px;
	right: 5px;}
#news article {
	display: inline-block;
	padding: 10px;
	border-radius: 10px;
	background-color: #f5f5f5;
}


un imprim écran de mon erreur:
http://img.imagesia.com/fichiers/j4/soucistransparence_imagesia-com_j4re.png
Modifié par 6l20 (05 May 2014 - 19:02)
Hello,

Dans ta feuille CSS de base tu as :
* {
  background-color: #c0c0c0;
  color: black;
  margin: 0px;
  padding: 0px;
  border: 0px;
  border-width: 0px;
  float: none;
}

Les images avec fond transparent affichent donc la couleur de fond du sélecteur universel, est-ce bien judicieux ?
Une solution possible (à tester !) est d'indiquer pour chacune de ces images un background transparent :
#news section.structure img {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: transparent;
}
#news section.csgo img {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: transparent;
}

Il y a probablement d'autres façons de faire, en attendant mieux, c'est à essayer et à tester sur différents navigateurs Smiley cligne
Modifié par 6l20 (05 May 2014 - 14:37)
En plein dans le mille !
J'ai retirer la background-color du selecteur général et merci beaucoup ! Smiley smile
Sujet clos
Aller à