SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
てるてる動画

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

問題

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>

何か背景画像を指定したdiv要素 何か背景画像を指定したdiv要素 何か背景画像を指定したdiv要素

背景色を半透明にしたdiv要素 背景色を半透明にしたdiv要素 背景色を半透明にしたdiv要素 背景色を半透明にしたdiv要素 背景色を半透明にしたdiv要素 背景色を半透明にしたdiv要素

関連するメモ

コメント