tana Blog

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;
 }

コメントを残す

メールアドレスが公開されることはありません。