4

以前から、私が担当しているWebサイトのデザインでは、下側が白、上側が透明という斜めの区画で構成されるヘッダー部分をグラフィックで装飾しています。結果は次のとおりです。

ここに画像の説明を入力

上部の色を変更すると、画像の上部が透明になるため、効果は完璧に見えます。

ここに画像の説明を入力

ここで、ユーザーがページの背景を変更できるようにする必要がありますが、それが問題です。

ここに画像の説明を入力

背景は赤に変わりますが、ヘッダーを飾るために使用した画像は変わりません。

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

ユーザーが任意の 24 ビット色を選択できるようにしているため、装飾イメージのコピーを異なる色で保存することはできません。また、複数のユーザーが同じファイルにアクセスする可能性があるため、ここで説明したようにリアルタイムで画像を変更することはできません。

4

2 に答える 2

2

データ URI を使用してリアルタイムで画像を変更してみることができます: https://developer.mozilla.org/en/data_URIs

データ URI を使用すると、次のようなことができます<img src="data:image/png;base64,SGVsbG8sIFdvcmxkIQ%3D%3D" />。新しいイメージを生成し、src属性を新しいデータ URI に設定することで、JS でイメージを動的に変更できます。

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

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

于 2012-04-04T17:18:12.283 に答える
0

背景画像を含む div に次を追加します。

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

現在の問題は、背景が div を背景画像と重ねることができないことです。を追加するとposition: absolute、div にある種の「ゴースト ボックス」モデルが与えられるため、ボディの背景をオーバーラップさせることができます。

PS: 必要に応じて遊ぶこともできz-indexます。

于 2012-04-04T17:10:03.187 に答える