半透明（透過）な背景色をCSSで作る

2014年7月6日に開催した”ものくろキャンプ” DigiPressカスタマイズワークショップにて『半透過の背景色で文字を画像に重ねて表示したい』との質問がありました。

半透過PNG画像を作って”その画像”を表示させるか？CSS3（スタイルシート）の設定からブラウザー上で半透過表示を作る、2つのアプローチがあると思います。

ここでは、CSS3による表示例をまとめました。

表示サンプル

実際の表示例です。いわゆる最近のブラウザー（モダンブラウザー）なら、表示可能なスタイルシート設定です。

ソースコード

Html

[code]
<img alt=”半透過表示サンプル” src=”https://mono96.jp/wp-content/uploads/2014/07/DSC05287-600×398.jpg” width=”600″ height=”398″ /></pre>
<div class=”half-box01″>Good morning cafe

要素の上に黒背景(透過率 40%)の要素を重ねてます。

背景が透けて表示されます。</div>
<pre>
[/code]

CSS

[code]
color: #ffffff;
background: #000000;
opacity: 0.4;
filter: alpha(opacity=40);/IE7/
position: relative;
top: -150px;
left: 0px;
width: 300px;
height: 110px;
[/code]

使ったCSSプロパティ（スタイルシートリファレンスへリンクしています）

• opacity
• filter
• position

参考サイト：

✓ あわせて読みたい

【CSS3】CSSで要素の透過