47

ユーザーが特定のサイト要素の色を選択できる Web CMS を構築しています。すべての色の値を 16 進数に変換して、それ以上の書式設定の手間 (「rgb(x,y,z)」または名前付きの色) を回避したいと考えています。そのための優れたJSライブラリを見つけました。

ヘックスに入れないのは「透明」だけです。これは、要素を透明として明示的に宣言するときに必要です。これは、私の経験では、値をまったく定義しないこととは異なる場合があります。

これを何らかの数値形式に変換できるかどうかは誰にもわかりませんか? 16 進値または「透明」を受け入れるようにすべての処理インスタンスを設定する必要がありますか? 他に方法が思いつきません。

4

8 に答える 8

49

ヘキサ - #RRGGBBAA

透明化を行う比較的新しい方法があり、HEXA (HEX + Alpha) と呼ばれます。6 桁ではなく 8 桁になります。最後のペアは Alpha です。したがって、ペアのパターンは#RRGGBBAAです。4 桁でも機能します: #RGBA

現在のところ、ブラウザのサポートについてはわかりませんが、DRAFT ドキュメントで詳細を確認できます。

§ 4.2。RGB 16 進表記: #RRGGBB

a の構文は、<hex-color>値が3、4、6、または 8 桁の 16 進数で構成される<hash-token>トークンです。言い換えると、16 進数の色は、ハッシュ文字 "#" の後にいくつかの数字または文字が続く形で記述されます(文字の大文字と小文字は関係ありません -は と同じです)。0-9a-f#00ff00#00FF00

8桁

最初の 6 桁は、6 桁表記と同じように解釈されます。16 進数として解釈される最後の数字のペアは、色のアルファ チャネルを指定します。ここで00、 は完全に透明な色をff表し、完全に不透明な色を表します。

例 3
つまり、（わずかに透明な青）#0000ffccと同じ色を表します。rgba(0, 0, 100%, 80%)

4桁

これは、3 桁表記と同じように「拡張」された、8 桁表記の短縮版です。16 進数として解釈される最初の桁は、色の赤のチャネルを指定します。ここで0、 は最小値をf表し、最大値を表します。次の 3 桁は、それぞれ緑、青、アルファ チャンネルを表します。

ほとんどの場合、Chrome と Firefox はこれをサポートし始めています。 ここに画像の説明を入力

于 2016-09-27T06:57:33.997 に答える
39

透明度は、色自体の外部にあるプロパティであり、コンポーネントとも呼ばれalphaます。透明度を純粋な RGB (赤、緑、青のチャネルを表す) としてコーディングすることはできませんが、色 + アルファ チャネルを一緒に定義する RGBA 表記を使用できます。

color: rgba(255, 0, 0, 0.5); /* red at 50% opacity */

「透明」が必要な場合は、色に関係なく、最後の数字を 0 に設定してください。色の部分がそれぞれ 100% の赤、緑、青に設定されていても、次のすべての結果は「透明」になります。

color: rgba(255, 0, 0, 0); /* transparent */
color: rgba(0, 255, 0, 0); /* transparent */
color: rgba(0, 0, 255, 0); /* transparent */

HEXA 表記 (または RRGGBBAA) もすべての主要なブラウザーでサポートされるようになりました。これは RGBA とほぼ同じですが、10 進数ではなく 16 進数表記を使用します。

color: #FF000080; /* red at 50% opacity */

さらに、透明な背景だけが必要な場合、最も簡単な方法は次のとおりです。

background: transparent;

で遊ぶこともできますがopacity、これは少し多すぎて、あなたの場合には望ましくない副作用があるかもしれません:

.half {
  opacity: 0.5;
  filter: alpha(opacity=50); /* needed to support IE, my sympathies if that's the case */
}
于 2009-11-17T19:44:50.130 に答える
34

アルファ チャネルは色の透明度の値を定義するため、アルファ値が 0 である限り、どの色も 100% 透明になります。通常、この 4 チャネルの色の種類は RGBA として知られています。

次のように CSS で RGBA を指定できます。

div {
    background: rgba(200, 54, 54, 0.5); /* 50% transparent */
}

すべてのブラウザーが RGBA をサポートしているわけではないことに注意してください。その場合は、フォールバックを指定できます。

div {
    background: rgb(200, 54, 54); /* fallback */
    background: rgba(200, 54, 54, 0.5); /* 50% transparent */
}

ブラウザのサポートと回避策の詳細については、こちらを参照してください。

于 2009-11-17T19:47:34.503 に答える
5

次の変換表を使用できます: http://roselab.jhu.edu/~raj/MISC/hexdectxt.html

たとえば、60% の透明度が必要な場合は、3C (16 進数に相当) を使用します。

これは、IE の背景のグラデーションの透明度に役立ちます。

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454)";

ここで、startColorstr と endColorstr: 最初の 2 文字は透明度の 16 進数値で、残りの 6 文字は 16 進数の色です。

于 2013-02-01T17:11:13.903 に答える
3

これには 2 つの一般的な方法があります。特定の色を「透明」として予約するか、その色を画像で使用しても透明にならないようにするか、「アルファ」と呼ばれる赤、緑、青と並んで 4 番目のチャネルを定義します。半透明/透明度を示します。

于 2009-11-17T19:45:21.207 に答える
-5

私も透明性を目指していました-多分あなたは背景の値を空白のままにしてみることができます例えば

bgcolor=" "
于 2012-04-16T14:09:31.107 に答える