2色領域の表示方法は？

Question

私が働いているウェブサイトのデザインでは、下側に白い斜線で、上側には透明なヘッダーセクションを装飾するグラフィックを使用しています。結果はこれです：私は、上の色を変更すると画像が、その上側の領域において透明であるよう

、効果は完璧なようだ：

さて、私は、ユーザーを許可する必要がありますページの背景を変更し、それが問題だします

背景は赤に変わりますが、ヘッダを装飾するために使用したイメージは変更されません。

ヘッダーの装飾を損なうことなくユーザーが背景を変更できるようにする方法はありますか？

デコレーションimagenの色を別の色で保存することは、ユーザーが任意の24ビットカラーを選択できるため、オプションではありません。また、複数のユーザーが同じファイルにアクセスする可能性があるため、explained hereのようにリアルタイムで画像を変更することはできません。

Answer 1

背景画像とdiv要素に以下を追加します。

position: absolute; 
top: 0px; 
right: 0px; 

問題は、現在背景が背景画像を使用してdiv要素に重ならないということです。 position: absoluteを追加すると、divに何らかの "ゴーストボックス"モデルが与えられ、ボディの背景が重なり合うことができます。

P.S .:必要に応じてz-indexで再生することもできます。あなたはデータのURIを使用してリアルタイムで画像を変更しようとすることができ

Answer 2

：<img src="data:image/png;base64,SGVsbG8sIFdvcmxkIQ%3D%3D" />：https://developer.mozilla.org/en/data_URIs

データURIを使用すると、以下のような何かを行うことができます。イメージは、新しいイメージを生成し、src属性を新しいデータURIに設定することで、JSで動的に変更できます。

JSで画像を生成するのに適した形式を見つける必要があります。以前はpnglib.jsを使っていましたが、それはうまく動作しますが、好みよりも遅くなる可能性があります。どのライブラリを迅速に生成できるかを確認するには、いくつかの異なるライブラリと画像フォーマットをテストする必要があります。また、画像を可能な限り小さくする - 斜めに分割された領域のみにする必要があります。右の領域はdivで代わりに行うことができます。

また、スクリプトを使用してサーバー側で独自のイメージを生成することもできます。背景色のGETパラメータを取り、適切な画像を生成するスクリプトを作成します（PHPの場合はGDまたはIMagickを使用できます）。利点は、サーバーがイメージを生成し、クライアントがJSで生成できるよりも速くクライアントに送信できることです。