0

透明部分と半透明部分を含む画像を作成したいので、たとえば色xを背景として指定すると、透明部分はX色を示し、半透明部分は色Xのグラデーションシェードを示します。 。

さまざまな色のテーマを持つクライアントが使用するテンプレートで使用するには、このような画像が必要です。

編集：質問は、画像に透明部分と半透明部分の両方を作成する方法ですか？どんなポインタでもお願いします。

編集：私は私の質問をより明確にしています。添付画像には透明部分があります。画像に透明な領域と半透明な領域（ポインタに向かう領域、現在は半透明ではありません）を含めることで、bgカラーとして赤を指定すると、透明な領域に赤い色が表示されます。半透明の領域は、赤のグラデーションシェードを表示します。ポインタの近くの領域をgimpで半透明にする方法を知りたいです。どんなアイデアでもお願いします。

ここに画像の説明を入力してください

ありがとう。

4

2 に答える 2

0

純粋な css でそれを行いたい場合は、画像を分割してから、pusle のようにまとめてスタイルを設定し、各レンガに異なる不透明度でスタイルを設定するクラスを与えることができます

.test {
background-color: #6374AB;
width: 100%;
color: #ffffff;
}

.opaque1 {  // for all other browsers
    opacity: .5;
}

.opaque2 {  // for IE5-7
    filter: alpha(opacity=50);
}

.opaque3 {  // for IE8
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

IE 互換性に関する注意事項

不透明度をすべての IE バージョンで機能させたい場合は、次の順序にする必要があります。

.opaque {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!
    filter: alpha(opacity=50);                  // second!
}

参照。

于 2012-05-21T09:05:33.610 に答える
0

PNG-24 画像を使用し、background-colorそれを保持する要素の を設定します。

<div id="header" style="background-color: #f00"></div>

<style>
    #header {
        background: transparent url("header-background.png") no-repeat 50% 0;
        height: 100px;
    }
</style>

インライン カラーはtransparentCSS のカラーをオーバーライドし、無地のカラーは画像の下になります。

于 2012-05-21T08:49:49.867 に答える