Plugin Adaptive Backgrounds afin d’extraire la couleur dominante d’une image en fond

adaptive

Lorsqu’on utilise un Background image, généralement on complète le fond par un background-color le plus adapté à l’image de fond, mais dans le cas où l’image de fond sera dynamique, alors un problème se posera.

Le plugin Adaptive Backgrounds va nous aider dans ce cas là, car le plugin va extraire la couleur dominante d’une image et l’appliquer en fond sur l’élément parent.

L’algorithme du plugin est codé en Jquery , assez complexe mais en gros il analyse l’image affichée et extrait la couleur dominante.

Ainsi on sera plus obliger d’utiliser de très grande image dans des slideshow pour couvrir toute la page surtout dans les grandes résolutions (1920px * 1080px), ainsi le fond complètera l’image avec une couleur pertinente.

Mise en œuvre :

Dans le HTML, il suffit d’ajouter l’attribut data sur l’élément concerné ( image, background…)

Puis appeler le plugin via Jquery

Répondre