Commentaires sur : Comment mettre un background sur une image transparente en CSS

Par : Mike

Mike — Wed, 31 Dec 2008 10:17:23 +0000

Panda Internet Security 2009 – 75% off until 12/31/08Here’s the link, it’s going for $20 now, when it normally goes for $80. This is a legit 3 license copy direct from the company. Not a gray market OEM found online.Panda is a really good antivirus/firewall/IPS coupled with anti-spam, web filter and backup tools.It’s here:

https://shop.pandasecurity.com/cgi-bin/shop/reg=US/ml=EN?ID=B12IS09ESD&track=89189

Panda will stop this deal after 12/31.

Par : Guillaume De Thomas

Guillaume De Thomas — Fri, 26 Dec 2008 23:32:10 +0000

La question que je me pause est… Que faisais tu sans la feuille de style de Wikipedia ?

Par : Achille

Achille — Fri, 26 Dec 2008 10:46:18 +0000

Nativement non, mais un petit script permet de régler ça

C’est ici que ça se passe : http://www.siteduzero.com/tutoriel-3-12629-les-png-24-bits.html

Par : Pouet

Pouet — Fri, 26 Dec 2008 08:11:24 +0000

Bonjour,
Achille tu oublies que le *.png transparent n’a pas de transparence sous IE 6, et crois moi sur des sites généralistes (=pas fréquentés uniquement par des GEEKS), ça represente encore une part non négligeable.

Par : Achille

Achille — Thu, 25 Dec 2008 12:11:36 +0000

L’avantage du PNG par rapport au gif réside tout d’abord en la qualité d’image que tu pourras obtenir. Le PNG a été mis au point pour répondre aux besoins de transparence notamment (transparence ne veut pas dire « fond vide », transparence signifie « voir à travers », ainsi, en PNG tu pourras trouver des images dont l’opacité est de 50% (les plus avertis parleront « d’utilisation réelle du canal alpha », chose impossible avec le GIF. Ensuite – et de mémoire donc à vérifier – le PNG contrairement au GIF, fait partie des recommandations du W3C (organisme chargé de proposer des standards afin que le web soit meilleur [accessibilité et interopérabilité des contenus notamment]).

Pour répondre à l’évolution du web et aux besoins d’images en mouvement de faible poids et de bonne qualité, le format aPNG a vu le jour et bien qu’il ne soit actuellement exploitable que sous Firefox 3+, il représente déjà la mort du gif animé à terme.

Pistes de réponses plus c omplètes :

- [FR] http://openweb.eu.org/articles/png_vs_gif/
- [FR] http://www.css-ig.net/docs/formats_images_web/

Par : babelkot

babelkot — Wed, 24 Dec 2008 23:28:15 +0000

Merci Achille,mais pour moi c’est un GIF avec fond transparent,comme j’en ai fais des centaines…

Par : Achille

Achille — Wed, 24 Dec 2008 18:50:11 +0000

@babelkot: Screenshot de Photoshop :

http://www.omicronlab.net/upload/upic-0562300001230144511.png

« Korben will rule the world » et autour, du vide.
Vide représenté par un quadrillé blanc/gris.

Par : babelkot

babelkot — Wed, 24 Dec 2008 18:38:22 +0000

Toujours rien pigé…Juste pour info en français « footer » se dit « pied de page »…

Par : Achille

Achille — Wed, 24 Dec 2008 18:20:24 +0000

@chris: il n’y a pas de problème de compatibilité .. il s’agit ici simplement de mettre un background .. les nouvelles versions d’IE gèrent la transparence PNG, au delà de ça, « l’astuce » fonctionne avec un gif également (ou avec n’importe quoi dont le background peut être changé en CSS). Et pour les puristes, du PNG avec fond transparent et couleurs indexées passe très bien sur toutes les version d’IE .. par contre la qualité ..

Sans vouloir faire de l’auto-promo ou quoi que ce soit : http://blog.andreloconte.com

Le background change aléatoirement, l’un des backgrounds (~5) est le motif auquel korben fait référence, comme je le disais plus haut, le même principe appliqué à un bloc (div) plutôt qu’une image.

Pour ceux qui ne comprendraient pas la subtilité de la chose : dans les logiciels d’édition graphique, il faut bien remplacer le « vide » (quand il n’y a rien) par quelque chose, et bien c’est ce motif (quadrillé gris/blanc) qui est communément utilisé.

Par : Locace

Locace — Wed, 24 Dec 2008 17:32:09 +0000

Dans le meme style regardez donc le footer du site de starcraft 2. super simple, super kiffant : http://eu.starcraft2.com/

Par : blusydays

blusydays — Wed, 24 Dec 2008 15:59:59 +0000

@ Dixours & babelkot

on est 3 boulets dans ce cas j’ai pas trop pigé.
Si une âme charitable peut expliquer aux profanes que nous sommes à quoi ça sert.

Par : babelkot

babelkot — Wed, 24 Dec 2008 14:55:48 +0000

Non « Dixours,nous sommes 2..Ici ,nous sommes chez des pros qui ne parlent que par affirmations lapidaires..mais sans rien montrer de concret,évidement…

Par : Dixours

Dixours — Wed, 24 Dec 2008 14:50:21 +0000

Je suis désolé, je dois être le boulet de la bande (il en faut bien 1 hein… mais j’ai pas pigé le truc. En fait, ce CSS permet de superposer 2 images c’est ça ? Pour un peu que celle du dessus soit transparente, elle laisse apparaitre celle du dessous ? Ca fonctionne qu’avec le png ou aussi le gif ? Ca passe sous IE ?

Par : Phantasmes

Phantasmes — Wed, 24 Dec 2008 14:17:28 +0000

@Lenalee: Même pensée, désolé Korben!

Par : Cerium

Cerium — Wed, 24 Dec 2008 13:42:30 +0000

Pas mal pickupjojo :p il y aussi plus radical avec un window.close() en JS

Par : Mich

Mich — Wed, 24 Dec 2008 12:59:16 +0000

@pickupjojo
Merci pour cette superbe astuce, je trouve les skyblog magnifique désormais.

@korben
Merci pour l’astuce

Par : pickupjojo

pickupjojo — Wed, 24 Dec 2008 12:44:53 +0000

Petite astuce CSS pour les Skyblogs :

body {
display: none;
}

Merci et joyeux Noël.

Par : kane

kane — Wed, 24 Dec 2008 11:45:50 +0000

@chris: Ah ! Voilà un com constructif…

Personne pour Test ?

@Korben:
En parlant d’astuces techniques frôlant le hack :
Tu met ça en haut de ton index.php, et automatiquement ça envoi l’erreur quand elle se produit par un formulaire à un autre script, où tu peux la traiter et informer le visiteur d’un problème temporaire; seules véritable limitation: si le JS est désactivé chez le client ou réglages serveurs restrictifs (je vais test chez free voir ce que ça donne), mais bon :

function catchFatalErrors($p_OnOff=’On’{
ini_set(‘display_errors’,'On’
$phperror= »;
ini_set(‘error_prepend_string’,$phperror);
$phperror=’ document.catcher.fatal.value = document.getElementById(« phperror ».innerHTML; document.catcher.submit();’;
ini_set(‘error_append_string’,$phperror);
}
catchFatalErrors();

Par : Roultabie

Roultabie — Wed, 24 Dec 2008 11:37:52 +0000

@Julien: Voila un commentaire constructif: « c’est connu mais utile ausi pour ça »

Dites, vous savez ou est Korben? Car à part une tranche de Bacon sur son site Je ne le vois pas

Par : chris

chris — Wed, 24 Dec 2008 11:30:03 +0000

Des info sur la compatibilité de cette methode avec Internet Explorer?

Par : Julien

Julien — Wed, 24 Dec 2008 11:29:29 +0000

Connu effectivment, mais peu utilisé, peut-ètre que ça pose un soucis avec certains navigateurs …

Et ça ne sert pas qu’aux images transparentes hein ! ça sert aussi à faire de jolies bordures sur une image avec un padding

Par : Roultabie

Roultabie — Wed, 24 Dec 2008 11:19:36 +0000

@Lenalee: Quels rabat joie!

En deux billets, deux commentaires « c’est tout vieux mec, je connais ça depuis longtemps »

Ça n’apporte rien de constructif, un « C’est vieux mais peu connu, c’est utilisé surtout pour… » Serait quand même mieux.

On s’en fout que ce soit connu de tout le monde, pas de moi, pas de Korben et d’autre surement.

Lenalee, si tu le connais, ça ne veux pas dire que « tout le monde » le connais.

Merde quoi

Par : Lenalee

Lenalee — Wed, 24 Dec 2008 11:14:06 +0000

C’est déjà connu de tout le monde, mais bon ._.