css - CSS カラー名 + アルファ透明度

Question

CSS で名前とアルファ透明度値で色を定義することは可能ですか?

すなわち:

#mytext { color: red 0.5 }

のようなrgbaに頼るのではなく

#mytext { color: rgba(255,0,0,0.5) }

Answer 1

いいえ。2020年の時点で、CSS Colors仕様では、色を次のように指定することしかできません。

• 名前付きの色
  • 4ビットカラーシステムに基づいた16色のセットがあります。このセットは非常に限られており、今日見るのは醜いです。
  • CSS2は、よりきれいなX11 + SVGという名前の色を追加しましたが、色に関連付けられた不透明度の値を指定することはできません。
  • 「システムカラー」という名前もありますが、最近のOSではUI要素に単一の単純なカラーを使用する傾向がなくなったため、これらは非推奨になりました。
• 使用するRGBカラー：
  • 6桁の16進表記（#rrggbb）
  • 3桁の16進表記（#rgb）
  • rgb( r, g, b )表記（パーセンテージまたは0〜255の数値を使用）
• 使用するRGBAカラー：
  • 8桁の16進表記（#rrggbbaa）
  • rgba( r, g, b, a )表記法（CSS4はrgb4つの引数を受け入れる必要がありますが、すべてのブラウザーがこれをサポートしているわけではないことに注意してください） 。これは。ではなくa範囲内にあることに注意してください。0-1.00-255
• HSLとHSLAの色：
  • hsl( h, s, l )
  • hsla( h, s, l, a )

これらはそれぞれ相互に排他的です。

名前付きの色（を除くorange）はすべて古い「16色」表示パレットのメンバーであり、今日では一般的に見苦しいため、色名はCSS1.xの時代よりも有用性が低くなっています。

読みやすさを向上させるために色の名前を使用する場合は、次のようなコメントを使用します。

color: rgb(0,0,0,0.5); /* semi-transparent black */

（多くのCSSエディターは、プロパティ宣言の外部にある場合にのみコメントを保持するため、コメントをセミコロンの後に置きます）。

CSS3は、24ビットX11カラーセットを含む名前付きカラーと関数を追加しますがhsl(h,s,l)、名前付きカラーと不透明度の値を混在させることはできません：http ://www.w3.org/TR/css3 -色/

Answer 2

この方法で、必要な結果を得ることができます。

#mytext{
  color: red;
  opacity: 0.5;
}

不透明度はテキストだけでなく要素全体に影響することに注意してください。たとえば、＃mytext要素に背景色がある場合、不透明度の値は0.5になります。

ただし、Daiに同意します。16進コードやRGBコードの代わりに色の名前を使用することは、あまり信頼すべきものではありません。使用するのは醜いカラーパレットです。