ワードプレスの投稿のカテゴリに応じて複数の色を持つ1つのイメージオーバーレイ

Question

私は、wordpressを使ってポートフォリオのウェブサイトを構築しています。私は現在、メインブログに自分の投稿の特集画像を表示していて、画像が転がっているときに色付きのオーバーレイが表示されています。その画像は、投稿のカテゴリに応じて変化します。現在、透明な1x1px画像を私のCSSで画像のサイズに合わせてurl（）をバックグラウンドで作成します。

私がしたいのは、投稿が複数のカテゴリに含まれている場合、カラーロールオーバーがすべての異なるカテゴリの色をストライプで表示することです。グリーン

ウェブ - - レッド

動画像 - 私のカテゴリと色が...

印刷作業以下であれば例えば

パープル...と私は行くのポストを持っています「プリント作業」と「ウェブ」にホバー状態はイメージの半分緑と半赤でなければなりません。投稿が3つすべてのカテゴリに含まれる場合、ホバー状態は3つの色（3つのストライプ - 緑色1つ、赤色1つ、紫色1つ）でなければなりません。

私はそれが私の検索で可能かどうかや、どこから始めたらいいか分からない。これはまったく達成可能ですか？もしそうなら、CSSだけを使うかJqueryを使うでしょうか？

Answer 1

これを行うには、コンテナのdivオーバーレイを設定し、それを.hover_divと呼ぶことができます。このdivはカテゴリの色分けを保持します。これらの.color_divを呼び出します。 foreachループを使用して、各投稿のカテゴリを.hover_div内に別の.color_divを作成します。これはcontainserの.hover_divに等しいサイズのカラーdivを行います

var colors = $(".color_div").length; 
var color_width = 100/colors; 
$(".color_div").width(color_width + "%"); 

：jqueryのを使用して

は、これらのdivのwithaの割合を幅を設定します。それぞれのcolor_divに別のクラス名を付けて、それぞれをターゲットにして色を設定します。

すべて設定する必要があります。