>JavaScriptjquery.adaptive-backgrounds.jsは、画像から最も支配的な色を抽出し、その背景にふさわしい色を配色するためのjQueryプラグインです。WEBデザインにおける背景色の決定は、簡単なようですがサイトのイメージをガラリと変えてしまうので、意外と神経を使うところですよね。配色にはセンスが問われます。迷うことなく、背景をコンテンツ画像にマッチさせてくれるjquery.adaptive-backgrounds.jsをご紹介します。ドミナントカラーから背景色を決める以下、jquery.adaptive-backgrounds.jsの実際のデモになります。デモjquery.adaptive-backgrounds.jsは、背景に関するあなたの迷いを解決してくれるjQueryプラグインです!自動的に画像の支配色を認識し、背景色に抽出してくれます。この時の、画像を支配的に印象づける色を「ドミナントカラー」と呼びます。ドミナントカラーを背景色に使用する例は、実は私たちの身近なところで見られます。AppleMusicです。アルバムを開くと、アルバムのジャケットに合わせて背景が変化します。見た時に感動した人も多いのではないでしょうか。jquery.adaptive-backgrounds.jsの仕組みは、CSSの背景画像に要素を適用させます。それによって、背景画像のドミナントカラーを認識し、背景色をサポートしてくれるのです。具体的には、主となる画像(img要素)に「data-adaptive-background=’1’」を、背景を設定する親要素には「data-ab-cuss-background=’1’」を設定します。オプション機能もいくつかあります。normalizeTextColor・・・背景色の明暗によってテキストの色を調整してくれます。(デフォルト:fales、動作:true)exclude・・・制作者が指定した色の間で、ドミナントカラーを設定してくれます。9以降・Firefox・Vivaldi・Safari・Androidなど多数対応しています。feedlyに登録するとbl6.jpの最新記事をいち早く受け取ることができます。