Colorier une image via CSS

Bonjour,

Dans le cadre d'un thème distribuable pour un CMS, j'aime bien proposé des déclinaisons pour l'utilisateur. Malheureusement je ne code que de façon épisodique et il me semblait avoir lu qu'il était possible de colorier une image (constitué de fonds unis) via une feuille de style. J'ai le souvenir qu'il fallait préparer l'image par couche et le CSS avait moyen d'appliquer une autre couleur.

J'ai beau rechercher à nouveau, je ne retrouve pas. Est-ce faisable ?

Merci.

bonsoir,

Que veut tu faire exactement ?

Il y a des "tricheries" avec, par exemple une image légèrement opaque au dessus d'un conteneur avec une couleur de fond, resultat aléatoires.

Une autre "tricheries, consiste a poser au dessus de l'images un conteneur avec un fond de couleur opaque a l'aide de rgba() ou hsla() .resultat aléatoire

CSS propose des filtres (pour demain) : page d' exemples https://developer.mozilla.org/fr/docs/CSS/filter (parmis d'autres)

En gros aujourd'hui, il n'y a qu'en préparant les images que tu est certains du résultat partout
++

sinon, un test exemple d'image colorisé via background et opacity : http://codepen.io/gc-nomade/pen/lHdfg Il Te suffit de tester la page dans plusieurs navigateur pour te faire une opinion.
Modifié par gc-nomade (08 Dec 2013 - 21:13)

Merci pour ta réponse,

Mon thème est visible ici. Je suis obligé d'utiliser une image pour que la sidebar et le content est la même hauteur. L'idée c'est de proposer d'autres déclinaisons que celle-ci, genre au lieu du gris foncé, on pourrait avoir un violet ou un orange… ou bien encore inverser les couleurs de la déclinaison actuelle.

Bonsoir,

Effectivement, le plus simple est de générer une image par couleur de thème et une feuille de style qui met a jour les couleurs des textes . 1px de hauteur suffit .
Si les couleurs des textes n'ont pas a être changés, tu peut, ponctuellement, bricoler avec un box-shadow sur #page :
exemple pour éclaircir la navigation :

box-shadow: 
inset 292px 0 rgba(255,255,255,0.2);

ou par exemple pour le contenu :

box-shadow:
inset -539px 0 pink;

ou un mixed des deux:

box-shadow:
inset  0 0 0 1px  #567,
inset -539px 0 pink,
inset 292px 0 #567;

++
Modifié par gc-nomade (09 Dec 2013 - 20:12)