Image fond 1 pixel et CSS3

Bonjour,

Il y a un temps, nous devions crèer des image de 1x1 pixel contenant une couleur de fond pour un bloc par exemple, et la répéter en hauteur et largeur afin que la couleur correspondent bien a ce que l'on avait choisi sur les différent navigateurs.

Du coup avec l'arrivée du CSS3, c'est image de fond de 1pixel, sont elles encore valable ? ou si ont passe directement la couleur par le background:# c'est suffisant ?

Merci

Bonjour,

Même avec css2 (car la version n'a rien à voir avec le problème)utiliser une couleur avec background est suffisant...

Par contre, utiliser une image de fond pour la couleur peut être intéressant si on veut être sûr du rendu avec gamma différent (quoique ça dépend du navigateur). Surtout, il n'y a pas de différences de teinte avec les images du site (justement à cause du gamma).

Et ça permet de gérer des transparences avec du png.
Modifié par Borak (16 Jan 2011 - 09:50)

Bonjour.

Sylvain245 a écrit :
Il y a un temps, nous devions crèer des image de 1x1 pixel contenant une couleur de fond pour un bloc par exemple, et la répéter en hauteur et largeur afin que la couleur correspondent bien a ce que l'on avait choisi sur les différent navigateurs.

Cette technique n'a jamais été nécessaire pour une couleur de fond opaque. La propriété background-color (ou le raccourci background), qui date de CSS 1 (!), marche très bien.

Borak a écrit :
Par contre, utiliser une image de fond pour la couleur peut être intéressant si on veut être sûr du rendu avec gamma différent

Non. Ça peut servir à ça mais c'est une mauvaise solution. Une rustine sur un problème mal compris. À ce sujet, on pourra lire:
http://www.alsacreations.com/astuce/lire/89-differences-couleurs-images-fonds.html

Borak a écrit :
Et ça permet de gérer des transparences avec du png.

Oui. Sur ce point, il y a en CSS3 les couleurs RGBA. Support dans tous les navigateurs modernes sauf IE (en attendant IE9, actuellement en beta, qui l'intègre).
Sur ce sujet:
http://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html
http://covertprestige.info/css/couleurs-rvba/

Bonne suite.
Modifié par Florent V. (16 Jan 2011 - 11:38)

Florent V. a écrit :

Non. Ça peut servir à ça mais c'est une mauvaise solution. Une rustine sur un problème mal compris. À ce sujet, on pourra lire:
http://www.alsacreations.com/astuce/lire/89-differences-couleurs-images-fonds.html

Je ne suis pas tout à fait d'accord avec ton article. J'ai déjà été confronté à ce problème et malheureusement il est quelques fois impossible de gérer des différences de couleurs entre images et fond de couleur, notamment entre Mac et PC. Soit c'est bon sur PC et pas sur mac, soit l'inverse. Et ce peu importe le navigateur. Et profil ICC ou pas.
Donc pour moi, utiliser une image de fond de 1px est une bonne solution pour gérer les problèmes de gamma.

Pour le reste, je suis 100% d'accord.

vdo93 a écrit :
Je ne suis pas tout à fait d'accord avec ton article. J'ai déjà été confronté à ce problème et malheureusement il est quelques fois impossible de gérer des différences de couleurs entre images et fond de couleur, notamment entre Mac et PC. Soit c'est bon sur PC et pas sur mac, soit l'inverse.

Dans mon expérience:

1. On peut résoudre les problèmes de raccord entre les couleurs CSS et les couleurs des images. Si on a besoin qu'une image se terminant par une couleur #A54B70 se fonde dans un background:#A54B70, c'est tout à fait possible en supprimant les métadonnées de correction de couleurs des images PNG et JPEG. Pas d'exception.

2. Par contre on n'obtiendra pas le même rendu des couleurs d'un système à l'autre, notamment entre Windows et OS X 10.5 et inférieurs. OS X 10.6 améliore les choses en s'alignant sur la valeur de gamma système de Windows (couleurs plus vives). Les informations colorimétriques (profil et gamma) peuvent aider dans certains navigateurs (Safari sur Mac, Firefox 3.6+, Internet Explorer je ne sais plus exactement comment…) à obtenir la couleur exacte désirée, mais dans ce cas on retrouve le problème de faux raccords entre couleurs CSS et images.

Si tu as des exemples précis de problème de raccord entre couleurs CSS et couleurs des images (premier point, celui traité par mon article) avec des images ne contenant aucune métadonnée de profil colorimétrique ou de gamma, je veux bien les voir. Je doute qu'ils existent, cependant.