【css】画像や背景を透過できるopacityとRGBA使い方

背景や画像をopacityとrgbaで透過

こんにちわ、ゆう。です。

ブログやwebサイトを作っていると「サイドバーのボタンや背景・画像を透明にしたいなー」って思う時がありますよね。 こんな時はcssで「Opacity」「RGBa」を使うと超簡単に透過することができるんです(^^♪

例えばいろいろなwebサイトを見ていると、画像やボタンにマウスが乗った時に色が薄くなったりすることがありますよね。 こういうのは大体「Opacity」「RGBa」を使っているんです。 それでは、背景や画像を透過することができる「Opacity」「RGBa」について紹介していきますね。

目次
RGBAプロパティ
opacityとRGBAが非対応のブラウザに使った場合
opacityとRGBAの違い

opacityプロパティ

opacityプロパティを使うと要素を透明にすることができます。 透明度は0.0(完全に透明)~1.0(完全に不透明)のように数値で指定します。

opacity解説

透明度を指定する数値は「0.1」「0.5」「0.25」のように小数点以下まで細かく設定する事ができます。

ですが、opacityはブラウザ(インターネットエクスプローラーなどの事)によって対応してなかったり、ブラウザによって記述の仕方が変わったります。 なので実際opacityを使う時は、各ブラウザ向けの記述をする必要があります。

簡単にいうと、opacityを正しく表示されるために、それぞれのブラウザ向けの記述をしようってことです。

.example {
   filter:alpha(opacity=50);
   -moz-opacity: 0.5;
   opacity: 0.5;
}

filter:alpha(opacity=50);とは

IE(インターネットエクスプローラー)向けの透明度の記述になります。 透明度は(opacity=50)の「50」の部分を変更することで調整できます。

(opacity=50)の「50」というのは「透明度が50%」という意味です。 なので、完全に透明にしたい時は(opacity=0)、完全に不透明にしたい時は(opacity=100)というように記述します。

※0・50・100以外にも「25」などのように好きな数値を入力してok

-moz-opacity: 0.5;とは

Firefox向けの透明度の記述です。 -moz-opacity: 0.5;の「0.5」の部分を変更する事で透明度が調整できます。

「0.5」というのは、「透明度が50%」という意味です。 完全に透明にしたい時は「-moz-opacity: 0;」、透過なしの状態にしたい時は「-moz-opacity: 1;」というように記述します。

opacity: 0.5;とは

safariやopera向けの透明度の記述です。

これも上と同じで「0.5」というのは「透明度が50%」ということです。 完全に透明にする時は「opacity: 0;」、透過なしにする時は「opacity: 1;」って感じです。

opacityプロパティを使う時は基本的には、この3つを一緒に記述しましょうね! では実際にopacityを使うとどうなるか見てみましょう!

h1 {
   filter:alpha(opacity=50);
   -moz-opacity: 0.5;
   opacity: 0.5;
}

h1{
  color:#fff;
  background-color:#000;
}
body{
  background-image:url(image.jpg);
}
/*変化が分かりやすいように背景を付けます*/
opacity表示例

もしも上で紹介したopacityの記述で、正しく表示されないブラウザがあったら、下のを使って見て下さい。 これでopacityを全ブラウザに対応できます。

コピペして、透明度の数値だけ変えれてあげればokです。 使い方は同じですが、「zoom:1;」だけはいじらないで下さいね。

.example {
   filter:alpha(opacity=50);
   -ms-filter: "alpha(opacity=50)";
   -moz-opacity:0.5; 
   -khtml-opacity: 0.5; 
   opacity:0.5;
   zoom:1; 
}
.example:not(:target){
	filter: none¥9;
	-ms-filter: none¥9;
}

RGBAプロパティ

RGBAというのは、RGBの赤(R)、緑(G)、青(B)に透明度が指定できるアルファ(alpha)を追加したものです。 簡単にいうと、RGBAを使うと色指定と透明度を指定できるよってこと。

rgba解説
.example{background:rgba(128,128,128,0.5);}

RGBAを使う時は、それぞれの数値を「,」(カンマ)で区切ります。 最初の3つの数値が色指定。 最後の4つ目の数値が透明度を指定する数値になります。

色は0~255の数値。透明度は0(完全に透明)~1(完全に不透明)の数値で指定できます。

透明度の数値は「0.5」「0.55」のように小数点以下まで指定できます。 ちなみに「0.5」の場合は透明度が50%という意味。

あと上の書き方ではbackgroundにRGBAを使っていますが、他のプロパティ(color、borderなどなど)にも使えます。

【rgba対応ブラウザ】
IE 8以上,chrome,Firefox 3以上,Safari 3以上,Opera 10以上

opacityとRGBAが非対応のブラウザに使った場合

非対応のブラウザにopacityとRGBAを使った場合、透明にはなりません では対応してないブラウザに使った場合、どういうふうに表示されるのか見てみましょう!

div{
  text-align:center;
  padding:5px 0;
  font-weight:bold;
  color:#333;
}

.example1{ background:rgba(0,53,104,0.1);}
.example2{ background:rgba(0,53,104,0.2);}
.example3{ background:rgba(0,53,104,0.3);}
.example4{ background:rgba(0,53,104,0.4);}
.example5{ background:rgba(0,53,104,0.5);}
.example6{ background:rgba(0,53,104,0.6);}
.example7{ background:rgba(0,53,104,0.7);}
.example8{ background:rgba(0,53,104,0.8);}
.example9{ background:rgba(0,53,104,0.9);}
.example10{ background:rgba(0,53,104,1);}
<div class="example1">rgba透明度0.1</div>
<div class="example2">rgba透明度0.2</div>
<div class="example3">rgba透明度0.3</div>
<div class="example4">rgba透明度0.4</div>
<div class="example5">rgba透明度0.5</div>
<div class="example6">rgba透明度0.6</div>
<div class="example7">rgba透明度0.7</div>
<div class="example8">rgba透明度0.8</div>
<div class="example9">rgba透明度0.9</div>
<div class="example10">rgba透明度1</div>
div{
  text-align:center;
  padding:5px 0;
  font-weight:bold;
  color:#333;
  backgroud:#003568;
}

.example1{ opacity:0.1; }
.example2{ opacity:0.2; }
.example3{ opacity:0.3; }
.example4{ opacity:0.4; }
.example5{ opacity:0.5; }
.example6{ opacity:0.6; }
.example7{ opacity:0.7; }
.example8{ opacity:0.8; }
.example9{ opacity:0.9; }
.example10{ opacity:1; }
<div class="example1">rgba透明度0.1</div>
<div class="example2">opacity透明度0.2</div>
<div class="example3">opacity透明度0.3</div>
<div class="example4">opacity透明度0.4</div>
<div class="example5">opacity透明度0.5</div>
<div class="example6">opacity透明度0.6</div>
<div class="example7">opacity透明度0.7</div>
<div class="example8">opacity透明度0.8</div>
<div class="example9">opacity透明度0.9</div>
<div class="example10">opacity透明度1</div>
opacityとrgbaの表示例と非対応のブラウザに使った場合の例

画像を見てもらえばわかるように、opacityは透明になりません。 RGBAの場合は、透明にならないだけでなく、指定した色まで反映されません

opacityとRGBAの違い

opacityとRGBAはどっちも透明にできるけど、どこが違うの? って思いますよね。

この二つの違いは「opacityはプロパティ」で「RGBAはプロパティの値」という事。 簡単にいうと、RGBAは背景色やボーダーの色など、色を指定する時に使えるもの。 opacityは、要素全体(例えばh1全体など)を透明にできるもの。 って感じです。

opacityとrgbaの違いを解説

例えば、画像を透明にしたい!って時がありますよね。 この場合は、RGBAで画像の色を指定しても意味ないですよね。 なのでopacityを使う必要があります。

img {
  opacity:0.5;
}
<img src="画像アドレス" alt="サンプル" height="高さ" width="幅">

逆に背景の色のみ、テキストの色のみ、ボーダーの色のみを変えたい場合は、RGBAを使います。

ここでopacityを使っちゃうと、全体が変わっちゃいますよね。 なので、こういう個別に設定したい時はRGBAを使います。

以上、opacityとrgbaの使い方でしたー(^^)/