半透明表示

January,02 2012

こんにちは、ゼノフィ渡部です。

cssだけで背景色を半透明にする方法をご紹介します。

今回は半透明表示をわかりやすくするために、bodyに背景で画像を表示させています。

半透明をしたい要素に基本となる色を指定し、半透明にするプロパティを記述します。ここでは10行目から13行目までが半透明にするプロパティに当たります。半透明にするプロパティのopacityは対応ブラウザを多少選びますので、クロスブラウザ対応の場合、opacity意外にもプロパティを記述する必要があります。14行目の「zoom: 1;」はIE6とIE7の場合、幅や高さを指定しない場合、filterとopacityプロパティが有効にならないので指定しています。

body {
  background: url(sky.jpg) no-repeat; /* 背景画像表示 */
}
 
div.translucence {
  width: 300px;
  height: 300px;
  color: #FFF;
  background: #000;
  filter: alpha(opacity=50);
  -moz-opacity: 0.50;
  -khtml-opacity: 0.50;
  opacity: 0.50;
  zoom: 1; /* IE6、IE7用 */
}

「div.translucence」内にテキストがありますので、テキストも半透明なります。

1
2
3

<div class="translucence">
    半透明
</div>

サンプル

CSS

body {
  background: url(sky.jpg) no-repeat;
}
 
h1 {
  color: #FFF;
}
 
div.translucence {
  width: 300px;
  height: 300px;
  color: #FFF;
  background: #000;
  filter: alpha(opacity=50);
  -moz-opacity: 0.50;
  -khtml-opacity: 0.50;
  opacity: 0.50;
  zoom: 1; /* IE6、IE7用 */
}

HTML

1
2
3

<div class="translucence">
    半透明
</div>

Webデザイン

半透明表示