HTML 文字背景は透過させて文字は透過させない方法

背景は透過させて文字は不透過で表示したい場合ってありますよね。
例えば半透明なタイトル帯を作りたい場合など。

背景色とともに文字まで透過してしまう例

Hello World

<style>
div.section {
  width: 259px;
  height: 194px;
  background: url(bg-1.jpg) no-repeat;
}
div.section p {
  font-size: 40px;
  color: #fff;
  background: #000;
  opacity: 0.3;
} 
</style>
<div class="column">
  <p>Hello World</p>
</div>

文字まで薄くなってしまっていますね

解決方法: backgroundを透過させる

Hello World

<style>
div.section {
  width: 259px;
  height: 194px;
  background: url(bg-1.jpg) no-repeat;
} 

div.section p {
  font-size: 40px;
  color: #fff;
  background: rgba( 0,0,0,0.3 );
}
</style>
<div class="column">
  <p>Hello World</p>
</div>

こういうことです。

しかしopacity,rgbaプロパティはたしかCSS3以上なので注意してください。CSS2以下の場合は透過png,gifの背景画像を敷きましょう。