7

私のアプリケーションには、アプリケーションが出力する特定のオブジェクトの色をユーザーが選択するために使用できるカラー ピッカーがあります。カラー ピッカーは、選択した色を RGBA 形式で出力しています。ただし、HTML カラー コードが必要です。事前に色を知らなくても RGBA を HTML に変換し、後で文字列として使用できるようにする必要があります。どうすればこれを行うことができますか?

4

2 に答える 2

13

RGBA はCSS3でネイティブにサポートされています。

div {
   background: rgba(200, 54, 54, 0.5); 
}

Firefox、Safari、Chrome、IE9、Opera ブラウザはすべて RGBA をサポートしています。古い IE ではサポートされていません。

幸いなことに、サポートしているブラウザでは RGBA カラーを指定でき、サポートしていないブラウザでは代替の色を指定できます。すばらしいハウツーについては、このリンクを確認してください。

これらは2つのオプションです: -リンクから-

1. 単色へのフォールバック:不透明度が利用できない場合、ブラウザーが単色を使用するようフォールバックできるようにします。の

h1 {
     color: rgb(127, 127, 127); 
     color: rgba(0, 0, 0, 0.5); //for modern browsers only
}

2. PNGへのフォールバック: 背景色 (境界線やテキストではなく) に透明度を使用している場合は、アルファ チャネル付きの PNG を使用して同じ効果を得ることができます。これは、必要な透明度のレベルごとに新しい PNG を作成する必要があるため、CSS を使用するよりも柔軟性が低くなりますが、便利なソリューションになる可能性があります。

h1 {
     background: transparent url(imageName.png);
     background: rgba(0, 0, 0, 0.5) none; //for modern browsers only
}

私が言おうとしているのは、HTML カラー コードは必要ないということですrgba。色を選択した後、JavaScript または jquery を使用して css プロパティを追加するだけで済みます。

それが役に立てば幸い。

于 2012-07-07T23:54:17.853 に答える
2

JavaScript で rgb(a) から hex への実際の変換 (質問のテキストが文字通り要求するもの) を探している場合:

red = green = blue = 255;
hex = '#' + 
    ("0" + (red).toString(16)).slice(-2) + 
    ("0" + (green).toString(16)).slice(-2) +
    ("0" + (blue).toString(16)).slice(-2);

もちろん、アルファに相当するものはありませんが、不透明度を設定できます (および/または-opacity古いブラウザー サポートのブラウザー固有の値)。

于 2012-07-15T21:50:07.717 に答える