CSS では 16 進数表記で部分的に透明な色を表現できますか?

CSS 16 進 RGBA

クエリ:

部分的に透明な色を表現する簡潔な方法はありますか? 16 進数?

答え:

はい、CSS カラー モジュール レベル 4 (現在編集者のドラフト段階) は、4 桁と 8 桁の 16 進数 RGBA 表記の両方のサポートを提案しています。 :

4 桁16 進表記

• 最初の桁は赤チャンネル (0-f) を表します。
• その後の 3 桁は緑、青、アルファ チャンネルを表します。

例:

background: #0000; /* Translucency omitted */

8 桁の 16 進表記

• 最初6 桁は RGB 値を表します (既存の 6 桁と同様)
• 最後の 2 桁はアルファ チャネルを表します (00 = 完全に透明、ff = 完全に不透明)。

例:

background: #00000000; /* Fully transparent */

未来ブラウザ:

これらの表記法は現在のブラウザではまだサポートされていませんが、カラー モジュール レベル 4 仕様の実装によって導入される可能性があります。互換性についてはブラウザの更新に注意してください。

サポートしていないブラウザのフォールバック:

それまでの間、フォールバックを使用してすべてのブラウザでのサポートを確保できます:

figure {
  background: #FEFE7F; /* Fallback color */
  color: #3F3FFE;     /* Fallback color */
  
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
  
  background: #ffff007F; /* Modern browsers */
  color: #0000ffbe;     /* Modern browsers */
}

以上がCSS では 16 進数表記で部分的に透明な色を表現できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。