ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS に RGBA カラーの簡潔な 16 進表記はありますか?

CSS に RGBA カラーの簡潔な 16 進表記はありますか?

Susan Sarandon
Susan Sarandonオリジナル
2024-12-07 19:05:15325ブラウズ

Is There a Concise Hexadecimal Notation for RGBA Colors in CSS?

CSS 16 進 RGBA 表記

問題: 現在、CSS は 10 進数値を使用した RGBA カラー表記をサポートしています (例: rgba(255, 0, 0) 、0.5))。部分的に透明な色を 16 進数で指定するもっと簡潔な方法はありますか?

答え:

CSS カラー モジュール レベル 4 (現在ドラフト版) が期待されています。 4 桁および 8 桁の 16 進数 RGBA 表記のサポートを導入します。

その方法Works

8 桁表記:

  • 最初の 6 桁は、赤、緑、青チャネルの 16 進値を表します。
  • 最後の 2 桁はアルファ チャネルを表し、00 は完全に透明、FF は完全に透明です。不透明。

4 桁の表記:

  • 最初の桁は赤チャンネルを表します。
  • 次の 3 桁は赤チャンネルを表します緑、青、アルファチャンネル、

8 桁の表記を使用すると、次の 16 進カラーはわずかに透明な青を表します。

#0000ffcc

これは次と同等です。 RGBA表記:

rgba(0, 0, 100%, 80%)

ブラウザサポート

この記事の執筆時点 (2015 年初頭) では、#RRGGBBAA カラー表記をサポートしているブラウザはありませんでした。ただし、次のフォールバック手法を使用して、今すぐ使用を開始できます:

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

以上がCSS に RGBA カラーの簡潔な 16 進表記はありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。