領域を透明にして背景画像が見えるようにする方法【CSS】

領域を透明にして背景画像が見えるようにしたサンプル

背景に画像や模様が設定されているページ上に、ボックスを作成する場合は普通であれば背景が隠れてしまいます。 ですがCSSで透明度の設定ができるopacityを指定すれば、ボックスを透明~半透明にできるため、背景の画像やデザインを活かすことができます。

例えば上のようなサンプルでも、すべてCSSだけで簡単に実現できます。

背景画像が透けて見えるようにする方法

cssのopacityプロパティを使うと、使用した要素の領域(部分)の不透明度を設定することができます。

初期値は100%のため、通常はどの要素も不透明の状態で表示されていますが、opacityの値を変更することで完全に透明~半透明にすることができます。 そうする事で背景画像が透けて見えるようになります。

opacityの書き方

opacityは次のように書く事ができます。

opacity: ;

この値の部分に不透明度の数値を0.0~1.0の範囲で指定します。 例えば値を「0」とすれば完全に透明「1」とすれば完全に不透明となります。 半透明にしたい場合は「0.5」とか「0.3」というように設定します。

また値にinheritと記述すれば親要素の値が継承されますが、よくわからなければ数値を入力して下さい。

opacityを書いてみる

では実際に書いてみましょう。 まずはHTMLから書いていきます。

<div class="sample">
  <p>You can do this kind onlywith css. Moreover, it is 
     recommended because it can do all with Copipe alone.
     Let's do it</p>
  <p>AN EXAMPLE</p>
</div>
/* 背景画像の部分 */
body {background: url("sample.jpg");}

/* 領域の透過 */
.sample{
  background:#fff;
  opacity:0.8;
}
opacityを適用して領域を透明にした例

opacityの値を0.8に設定したのでその分だけ透明になりました。 (フォントは別で設定しています。)

この場合divに対してopacityを設定したので、その領域が半透明になって背景画像が透けて見えるのが確認できると思います。 ちなみにopacityを指定しない、もしくはopacity:1;というように設定すると下のようになります。

opacityを設定しなかった場合の例

全てのブラウザに対応させる

opacityが実装されてないブラウザ向けに以前は次のように記述してました。

.sample{
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  -khtml-opacity:0.8;
  opacity:0.8;
}

ですが現在では、主要なブラウザで実装済みなためベンダープレフィックスは不要のようです。

透過させたデザイン

以上を踏まえて、デザインを少しだけ調整して書いてみたのが下記になります。 (HTMLは最初に掲載したのを使用)

body {background: url("sample.jpg");}

.sample{
  background:#fff;
  height:240px;
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  -khtml-opacity:0.8;
  opacity:0.8;
  margin:70px;
  padding:25px;
  -webkit-box-shadow:0 1px 2px #ccc;
  -moz-box-shadow:0 1px 2px #ccc;
  box-shadow:0 1px 2px #ccc;
}
領域を透明にし背景画像がみえるようにデザインした例

ベンダープレフィックスなども一応書いてありますが、不要なものもあります。

細かい箇所は、用途によって変える必要がありますが、コピペするだけでほぼ同じにできるので是非やってみて下さいね。 (p要素の位置、サイズ、ファミリーは別で指定してます)

まとめ

領域を透明にして背景を透けて見えるようにする以外にも、opacityには色々使い道があります。 例えば:hoverなどで画像にマウスが乗った時に透明になるようにしたりするなど、色んな場面で使われます。

透明にするだけなら超簡単なので、ぜひ実践してみて下さいね。