【CSS】背景だけ半透明にしたい

Tweet

Category css 2015/06/06

問題

opacityで半透明にすると、半透明にした要素の中身全部が半透明になっちゃう。

文字などは半透明にしないで、背景だけ半透明にしたい。

答え

background-colorをrgba指定するとこんな感じになる。

<div style="background:url(http://placehold.jp/16/08baf5/006080/16x16.png?text=o);max-width:400px; padding:50px;">
  <p>何か背景画像を指定したdiv要素 何か背景画像を指定したdiv要素 何か背景画像を指定したdiv要素</p>
  <div style="background-color:rgba(0,0,0,0.3); color:#fff; padding:50px;">
    <p>背景色を半透明にしたdiv要素 背景色を半透明にしたdiv要素 背景色を半透明にしたdiv要素 背景色を半透明にしたdiv要素 背景色を半透明にしたdiv要素 背景色を半透明にしたdiv要素</p>
 </div>
</div>