JeuWeb - Crée ton jeu par navigateur
[CSS] Attribut RGBA - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [CSS] Attribut RGBA (/showthread.php?tid=5702)

Pages : 1 2 3

[CSS] Attribut RGBA - Dexyne - 19-09-2011

Yop à tous Smile,

J'ai un petit soucis (je suppose que c'est tout con même mais je vois pas le soucis ou sa solution en faite).

Alors j'ai mis dans mon css l'utilisation de l'attribut rgba pour le background sur un h2 (et aussi h3 mais c'est la même chose).
Je l'ai utilisé ainsi :
background: #8b7e5a rgba(0, 0, 0, 0.2);
Ça fonctionne bien sous Opera mais Firefox ou Chrome ne le voit pas, pourtant j'ai appliqué un :
color: rgba(0, 0, 0, 0.7);
qui lui est vu... (dans FF ou Chrome)

J'ai même essayé en utilisant les valeur rgb et non l'hexadécimal mais ça ne change rien (je préfère l'hexa je trouve ça plus simple pour retrouver les valeurs).
J'ai même essayé de mettre juste un :
background: #8b7e5a;
et étonnamment il n'est pas vu :O
J'ai aussi tenté d'utiliser une image en fond répéter sur la largeur mais sans trop de succès (peut-être que j'avais mal fait un truc pour lui bien que je ne crois pas :O).

Voilà voilà à coup sur c'est tout bête mais si vous pensez avoir un idée sur la question, si y'a besoin d'autre chose demander moi Smile.

Dex'.

RE: [CSS3] attribut rgba - Sephi-Chan - 19-09-2011

Et tu cherches à faire quoi ?
J'ai cru comprendre que tu souhaitais appliquer la couleur donnée en hexadécimal, mais avec l'opacité donnée dans le RGBA ?


RE: [CSS3] attribut rgba - Hideaki - 19-09-2011

Essaye ceci :
background-color: rgba(139, 126, 90, 0.2);
j'ai testé sous FF je n'ai pas eu de soucis donc ... rgb n'accepte pas de valeur hexa.

RE: [CSS3] attribut rgba - Dexyne - 19-09-2011

@sephi oui c'est cela.

@Hideaki j'ai déjà testé ça et en plus ça ne fonctionne pas xD je sais pas pourquoi. Sous Opera en plus il ne voit pas si j'utilise rgb à la place de l'hexa, assez étrange...
Et en mettant les 2 ou un seul des deux ça ne change rien, Opera le voit (sauf si que les valeur rgb et FF n'en voit aucun).
Je n'ai pourtant aucun autre h2 dans mon CSS qui aurait pu le modifier la dessus.
Je vais voir si Chrome le voit tiens.

RE: [CSS3] attribut rgba - Hideaki - 19-09-2011

Montre ton code entièrement, car ton erreur est là Smile puisque mon test à bien fonctionné sur FF à moins que tu ailles une anciennes versions FF 3 ?

RE: [CSS3] attribut rgba - Dexyne - 19-09-2011

Mon H2 :


h2 { height: 40px;

	margin: 9px 0 3px 0;

	padding: 6px 0 5px 65px;

	line-height: 40px;

	font-size: 28px;

	color: rgba(0, 0, 0, 0.7);

	background-color: rgba(139, 126, 90, 0.2);

	background: #8b7e5a rgba(0, 0, 0, 0.2);

}
Bon là y'a les 2 mais ça change rien au final ça ne fonctionne pas (sauf pour Opera grâce au background avec l'hexadécimal).
Si tu as besoin d'un autre truc je verrais pour le donner mais tout devrait être là.
La hauteur je l'ai défini pour quand j'ai testé avec l'image en fond donc je l'ai laissé et puis ça défini sa hauteur.

edit: je suis sous FF6.0.2 donc je vois pas le soucis ^^'


RE: [CSS3] attribut rgba - Hideaki - 19-09-2011

Chez moi avec FF 6, tout fonctionne bien et avec opéra pas de soucis non plus, par contre supprime la deuxième ligne.
Voici mon fichier HTML


<!DOCTYPE html>

<html>

<head>

<style>

h2 { height: 40px;

	margin: 9px 0 3px 0;

	padding: 6px 0 5px 65px;

	line-height: 40px;

	font-size: 28px;

	color: rgba(0, 0, 0, 0.7);

	background-color: rgba(139, 126, 90, 0.2);

}

</style>

</head>

<body>

<h2> coucou </h2>

</body>

</html>


RE: [CSS3] attribut rgba - Dexyne - 19-09-2011

Bah bizarrement chez moi ça ne fonctionne pas, d'ailleurs en supprimant la dernière ligne sur Opera ça enlève le fond...(j'ai la dernière version d'Opera).


RE: [CSS3] attribut rgba - Hideaki - 19-09-2011

essai avec le fichier que j'ai fourni, par contre pour firefox quelle est la version, pourrais tu fournir l'intégralité du fichier html.

RE: [CSS3] attribut rgba - Dexyne - 19-09-2011

Je viens de testé et ça fonctionne bien dans un fichier html de test, je ne comprend pas trop pourquoi ça ne fonctionne pas avec mon autre site.
Et te fournir l'intégralité du code html je vois pas trop ce qui ne va pas dans mon html, j'ai juste des h2 il devraient avoir l'effet que je désire.



<section class="content_home grid_5">

	<div id="events" class="grid_5">

		<div id="slide1" class="slide">

			<div class="slider_visual">

				<?php echo img('event_1.jpg', 'event 1'); ?>

			</div>

			<div class="slider_title">

				Slide 1

			</div>

		</div>

		<div id="slide2" class="slide">

			<div class="slider_visual">

				<?php echo img('event_1.jpg', 'event 2'); ?>

			</div>

			<div class="slider_title">

				Slide 2

			</div>

		</div>

		<div id="slide3" class="slide">

			<div class="slider_visual">

				<?php echo img('event_1.jpg', 'event 3'); ?>

			</div>

			<div class="slider_title">

				Slide 3

			</div>

		</div>

	</div>



	<article class="grid_5">

		<p>A remplir</p>



		<h2>Stats du forum</h2>

		<p><?php ssi_boardStats(); ?></p>

	</article>

</section>



<aside id="news" class="grid_7 omega">

	<header>

		<h2>DERNIERES ACTUALITES</h2>

	</header>



	<article>

		<ul class="bgc">

		<?php foreach($news_smf as $news):

			echo '<li>'.anchor($news['href'], $news['subject']).' posté par '.$news['poster']['link'].', avec '.$news['link'].'</li>';

		endforeach; ?>

		</ul>

	</article>

</aside>



<section id="media_home" class="grid_7 omega">

	<div class="video_home_center">

		<object width="513" height="292">

		<param name="movie" value="http://www.youtube.com/v/SGeq8FDuFUU?version=3&amp;hl=fr_FR"></param>

		<param name="allowFullScreen" value="true"></param>

		<param name="allowscriptaccess" value="always"></param>

		<embed src="http://www.youtube.com/v/SGeq8FDuFUU?version=3&amp;hl=fr_FR" type="application/x-shockwave-flash"

						 width="513" height="292" allowscriptaccess="always" allowfullscreen="true"></embed>

		</object>

	</div>

</section>

Si tu penses trouver quelque chose par rapport à mon html fais le moi savoir, là c'est la page d'accueil mais ça me le fait sur d'autre page, je charge avant la vue contenant le header et après celle du footer.