カテゴリー:
CSS
タグ:
 css3

このエントリーをはてなブックマークに追加
更新日時:
2012年12月08日(土)
作成日時:
2012年12月08日(土)

前の記事 / 次の記事

CSS3を使って背景画像を透過させて文字と重ねた時にいい感じに文字が読みやすくなるようにしたい。

これはCSS3を使えば簡単に実現出来るのだけど、
実際に透過させるのは背景画像じゃなくて背景に重ねた文字の背景色。

こんなhtmlがあったとして、

<div class="outer-container">
  <div class="inner-container">
    <p>
      nice to meet you.
    </p>
  </div>
</div>

こういうCSSを書けばいい。

div.outer-container{
  background-image: url("/path/to/background_image");
}
div.inner-container{
  background-color: rgba(255,255,255, 0.5);
  // 左から 赤、緑、青、透過の度合い(0~1)
}

ポイントは背景画像を持つ要素の子要素として文字を持つ要素を配置することと、
"Opacity"を使わずに"background-color: rgba("r,g,b,a);"を使うこと。

背景画像を持つ要素に"opacity"を指定することでも背景を透過させることが出来るけど、
この場合文字もろとも透過されるので文字を読みやすくするっていう目的で透過させたい場合はちょっと微妙。

ブラウザごとの対応状況は特に調べてない。

【参考ページ】
CSS3 要素を透明に出来る Opacity と RGBa の使い方