知っておくべき画像のテーマカラーを取得するための CSS ヒント (共有)

この記事では、CSS を使用して画像のテーマカラーを取得するためのちょっとしたトリックを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

背景

理由は、WeChat 技術グループのクラスメートが、写真のメインの色を取得する方法はないか、と尋ねたことです。画像があるので、そのメインカラーを取得します:

取得した色の値を使用して、次のような関数を実装します。コンテナーに画像があり、背景が必要です。 color 次のように、画像のメインの色に適合させることができます:

誰もがいくつかの提案をしており、計算に Canvas を使用するという意見や、特別なオープンソースを推奨する意見もあります。図書館、どれもとても良いものです。

では、この機能はCSSを使って実現できるのでしょうか？

少し空想のように聞こえますが、CSS でこの効果を実現できますか?そうですね、CSS を使用すると、確かに画像のメインカラーを賢い方法で近似させることができます。メインカラーの要件が特に厳密でない場合には、これが 1 つの方法です。一緒に調べてみましょう。

フィルター:ブラー()と変換:sacle()を使用して、画像のテーマカラーを取得します。

ここでは、ぼかしフィルターと拡大効果を使用して、画像のテーマカラーを取得します。おおよその結果 画像のテーマカラー。

次のような画像があるとします。

<div></div>

ぼかしフィルターを使用して、画像にぼかしフィルターを適用します。

div {
    background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-知っておくべき画像のテーマカラーを取得するための CSS ヒント (共有)?resize=1024%2C683&ssl=1");
    background-size: cover;
    filter: blur(50px);
}

効果を見てみましょう。比較的大きなぼかしフィルタを使用して、画像を blur(50px) にします。ぼやけた画像は少し似ていますが、エッジがぼやけています。overflow## を使用してみてください。 # トリミングします。

次に、ぼやけたエッジを削除し、

transform:scale() を使用して効果を拡大し、色の焦点を再設定し、変換する必要があります。次のコード:

div {
    position: relative;
    width: 320px;
    height: 200px;
    overflow: hidden;
}

div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-知っておくべき画像のテーマカラーを取得するための CSS ヒント (共有)?resize=1024%2C683&ssl=1");
    background-size: cover;
    // 核心代码：
    filter: blur(50px);
    transform: scale(3);
}

結果は次のようになります:

このようにして、CSS を使用して画像のメインカラーを取得し、効果はまだ良いです！

完全なコードについては、ここをクリックしてください:

CodePen デモ -- フィルターとスケールで画像のメインカラーを取得します

欠点

もちろん、この解決策にはいくつかの小さな問題もあります。

は画像の主な色を大まかに取得することしかできませんが、それほど正確に取得することはできません。また、
1. filter: Blur(50px) 50px 何らかのデバッグが必要です
ぼかしフィルター自体がパフォーマンスを消費します。このメソッドで取得した背景がページ上に複数ある場合、パフォーマンスに一定の影響を与える可能性があります。実際に使用する場合は、いくつかのトレードオフが発生します。

最後に

# さて、この記事はここで終わります。CSS を使用して画像のテーマ カラーを取得するちょっとしたトリックを紹介します。役に立ちます:)

元のアドレス: https://segmentfault.com/a/1190000039979112

著者: chokcoco

その他のプログラミング関連の知識については、

プログラミング ビデオをご覧ください。 ！

以上が知っておくべき画像のテーマカラーを取得するための CSS ヒント (共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。