Qraft(クラフト) 資格・学習クイズアプリ

CSS基礎 練習問題 52:背景色のみの透過指定

要素の背景色に黒を指定しつつ、背景色だけを50%の半透明にしたい場合(中のテキストは半透明にしない)、正しいCSSの書き方はどれか。

  1. background-color: rgb(0, 0, 0, 50%);
  2. background-color: rgba(0, 0, 0, 0.5);
  3. background: #000; opacity: 0.5;
  4. background-opacity: 50% #000000;
  5. background-color: alpha(#000, 0.5);
正解と解説を見る
正解:background-color: rgba(0, 0, 0, 0.5);

背景色だけを半透明にするには、`rgba()` 関数を使用してアルファ値(透明度)を指定する書き方が正解です。

【正解の理由】
`rgba(赤, 緑, 青, 透明度)` の形式で指定すると、要素全体の透明度には影響を与えず、背景色だけを透過させることができます。第4引数の `0.5` は50%の不透明度を意味します。

【不正解の理由】
• `background-color: rgb(0, 0, 0, 50%);` は、rgb関数の中に透明度をパーセンテージで書く古い記法に近く、標準的な透過の指定としては不正確な場合がある
• `background: #000; opacity: 0.5;` は、`opacity` プロパティを使うため、背景だけでなく要素内のテキストまで一緒に半透明になってしまう
• `background-opacity: 50% #000000;` は、CSSにそのような名前のプロパティは存在しないため無効である
• `background-color: alpha(#000, 0.5);` は、CSSの標準機能に `alpha()` という単独関数で透過を設定する記法は存在しない

← 前の問題問題一覧次の問題 →
アプリで解いてレーティングを上げる(無料・登録不要)