#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. OtherTips › opacity&rgba

Opacity and RGBA,Transparent

半透明・透過部品

対象の要素を半透明にしたい場合は、opacityプロパティを使います。
しかし、opacityで透過した要素の中に文字や画像を表示すると同様に透過されてしまいますので、透明度を高くしすぎると読み辛くなってしまいます。表示する文字色は濃いめの色をオススメします。

半透明ボックス

<div class="sample1">
<p>例1:透過度50%のdivボックスです。文字も画像も半透明になります。</p>
<img src="sample-img.gif" width="70" height="49" alt="sample">
</div>
.sample1{
   width: 180px;
   height: auto;
   background-color: #ffffff; /* 透過したい背景色 */
   color: #000000; /* 表示する文字色 */
   border: 1px solid #3486b1; /* 枠線 */
   opacity: 0.5; /* 透過度(50%) */
}
/*  0~1 0.6などの小数点で指定。0に近いほど透明に、1に近いほど不透明になります。 */

例1:透過度50%のdivボックスです。文字も画像も半透明になります。

sample

opacityはIE9以上・他モダンブラウザも実装済み。

半透明ボタン

input要素のフォーム部品をCSSで装飾する際、そのままではinput要素(ボタンや入力フォーム他)全てにスタイルが適用されますが、type属性の値をセレクタに指定することで要素を特定することができます。

例2-1:
<input type="text" size="20" placeholder="入力フォーム"> <input type="button" value="ボタン">
input{
   background-color: #ffffff; /* 透過したい背景色 */
   color: #000000; /* 表示する文字色 */
   border: 1px solid #3c7fb1; /* 枠線 */
   opacity: 0.5; /* 透過度(50%) */
}
/* 上記だとinput要素全てに対して装飾してしまう */

例2-1:

input要素全てに対して装飾してしまう

input[type="button"]{
   background-color: #ffffff; /* 透過したい背景色 */
   color: #000000; /* 表示する文字色 */
   border: 1px solid #3c7fb1; /* 枠線 */
   opacity: 0.5; /* 透過度(50%) */
}
/* input要素のうちtype属性値がbuttonだけに装飾 */

.sample2-2 input[type="button"]{
   background-color: #ffffff; /* 透過したい背景色 */
   color: #000000; /* 表示する文字色 */
   border: 1px solid #3c7fb1; /* 枠線 */
   opacity: 0.5; /* 透過度(50%) */
}
/* クラス属性 sample2-2のinput要素、type属性値がbuttonだけに装飾 */

例2-2:

input要素のボタンに対して装飾する

インラインに書くときは、タグに直接、属性としてスタイルを指定します。
例3:
<input type="button" value="ボタン" style="background-color:#ffffff; color:#000000; opacity: 0.5;">

その他の半透明部品

例4-1:1行テキストボックス
<input type="text" size="20" placeholder="入力フォーム">
例4-2:複数行テキストエリア
<textarea cols="20" rows="4" placeholder="テキストエリア"></textarea>
例4-3:プルダウン形式セレクトボックス
<select name="sample4-3">
<option value="">プルダウン形式のメニュー</option>
<option value="sample1">プルダウン形式sample1</option>
<option value="sample2">プルダウン形式sample2</option>
<option value="sample3">プルダウン形式sample3</option>
</select>
/* 例4-1:(1行テキストボックス) */
.sample4-1 input[type="text"]{
   background-color: #ffffff; /* 透過したい背景色 */
   color: #000000; /* 表示する文字色 */
   border: 1px solid #339933; /* 枠線 */
   opacity: 0.5; /* 透過度(50%) */
}

/* 例4-2:(複数行テキストエリア) */
.sample4-2 textarea{
   background-color: #ffffff; /* 透過したい背景色 */
   color: #000000; /* 表示する文字色 */
   border: 2px dashed #ff0033; /* 枠線 */
   opacity: 0.5; /* 透過度(50%) */
}

/* 例4-3:(プルダウン形式セレクトボックス) */
.sample4-3 select{
   background-color: #ffffff; /* 透過したい背景色 */
   color: #000000; /* 表示する文字色 */
   border: 2px dotted #0033ff; /* 枠線 */
   opacity: 0.5; /* 透過度(50%) */
}

例4-1:

例4-2:

例4-3:

背景色は半透明にして文字色は不透明にする

opacityプロパティでは対象の要素全体が半透明になってしまいます。
背景色は半透明に、文字色は不透明にしたい場合は『opacityプロパティ』では無く『RGBAカラーモデル』を使います。

.sample1-2{
   width: 180px;
   height: auto;
   background-color: rgba(255,255,255,0.5); /* 透過したい背景色 */
   color: #000000; /* 表示する文字色 */
   border: 1px solid #3486b1; /* 枠線 */
}

例1-2:透過度50%のdivボックスです。背景色は半透明に、文字と画像は不透明になります。

sample

RGBAカラーモデルはIE9以上・他モダンブラウザも実装済み。

.sample2-3 input{  /* input要素のフォームとボタン */
   background-color: rgba(255,255,255,0.5); /* 透過したい背景色 */
   color: #000000; /* 表示する文字色 */
   border: 1px solid #3c7fb1; /* 枠線 */
}

例2-3:

input要素フォームとボタン両方を装飾

RGBAカラーモデルの記述は、色の指定と透明度(アルファチャンネル)を指定する事ができます。
rgba(R赤,G緑,B青,Aアルファ値);
RGBの色は0-255、または0%-100%で指定し、透明度は0(完全に透明)~1(完全に不透明)の数値で指定します。
opacityプロパティとRGBAカラーモデルはどちらも透過する事ができますが、rgbaは画像を透過する場合には使えません。画像を透過する場合はopacityを使います。

RGBAについてと数値取得ツールがDesignTipsの『RGBA変換ツール』のページに有るのでご利用下さい。

透過部品

transparentは、プロパティの値として定義されている『完全な透明色』を表すキーワードです。厳密には、rgba(0, 0, 0, 0) のショートハンドキーワードで黒の不透明度ゼロです。
背景色を透過させたい場合は、背景色 background-color に値として transparent を指定します。

.sample2-4 input{  /* input要素のフォームとボタン */
   background-color: transparent; /* 透過 */
   color: #000000; /* 表示する文字色 */
   border: 1px solid #3c7fb1; /* 枠線 */
}

例2-4:

input要素フォームとボタン両方を装飾