私のアプリケーションには、アプリケーションが出力する特定のオブジェクトの色をユーザーが選択するために使用できるカラー ピッカーがあります。カラー ピッカーは、選択した色を RGBA 形式で出力しています。ただし、HTML カラー コードが必要です。事前に色を知らなくても RGBA を HTML に変換し、後で文字列として使用できるようにする必要があります。どうすればこれを行うことができますか?
2 に答える
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 プロパティを追加するだけで済みます。
それが役に立てば幸い。
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
古いブラウザー サポートのブラウザー固有の値)。