CSS 要素を透明にする
2019年5月11日
カテゴリー: CSS
コピペ用メモ。
透過度を指定するには、「RGBa」か「opacity」を利用する。
それぞれの使い方。
div { opacity : 0.5; }
div { background : rgba(255,255,255,0.5); }
まず根本的な違いは、「opacity」はプロパティ、「RGBa」は値という部分。
セレクタ { プロパティ : 値; }
「RGBa」は、背景色「background-color」、文字色「color」、枠線の色「border-color」など、色を指定できるプロパティで使用し、色を指定した上でその透過度を指定する。
対して「opacity」は、セレクタそのものに透過度を指定する。
それぞれの使い方。
要素の色を透過させるRGBa
背景色を白くしたdiv要素「white-box」に、「RGBa」で透過を指定。
RGBa
div.white-box { color:#000000; border:solid 5px #ffffff; background:rgba(255,255,255,0.3); }
値は「赤(R)、緑(G)、青(B)、アルファ(a)」を表す。
RBGをすべて0にすると真っ黒に、すべて最大(255)にすると真っ白になる。
(こちらが便利:16進数・RGB・RGBa変換ツール)
アルファ値は、0と1の間で指定し、0に近づけるほど透明に、1に近づけるほど不透明になる。
「RGBa」で透過させると、「div.white-box」のうち、透過しているのは「RGBa」で指定した背景色「background(-color)」のみで、そのほかの文字色、枠線の色は透過していない。
要素を透過させるopacity
同じくdiv要素「white-box」を「opacity」で透過。
opacity
div.white-box { color:#000000; border:solid 5px #000000; filter:alpha(opacity=30); -moz-opacity: 0.3; opacity:0.3; }
4行目・5行目はIEやFirefoxなどほかのブラウザのための指定。
「RGBa」と同じく、値を0と1の間で指定し、0に近づけるほど透明に、1に近づけるほど不透明になる。
「RGBa」と異なり、div要素「white-box」そのものを透過させているため、その中の文字色や枠線の色も一緒に透過している。
(枠線色が白だとまったく見えなくなったため、分かりやすいように黒に変更)
使いどころとしては画像「img」など色を指定することのない要素を透過させるときとか。
背景画像を指定した要素の中で、画像を透過させたいときがあれば使えるかも。
div { background:url('images/sora_gazou.jpg'); } img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; }
コメントを残す