半透明(透過)な背景色をCSSで作る

この記事で紹介しているテーマは、100%GPLではないテーマです。WordPressコミュニティは、100%GPLライセンスを推奨しています。私も、現在は100%GPLライセンスのテーマのみを推奨しています。100%GPLテーマの記事はこちらです。

この記事は2年以上前に公開された記事です。情報が古くなっています。現在は状況が異なる可能性があります。

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

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

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

表示サンプル

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

半透過表示サンプル

Good morning cafe要素の上に黒背景(透過率 40%)の要素を重ねてます。背景が透けて表示されます。

ソースコード

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プロパティ(スタイルシートリファレンスへリンクしています)

参考サイト:

✓ あわせて読みたい

【CSS3】CSSで要素の透過

この記事を書いた人

大東 信仁

カンパチが好きです。

プロフィールはこちら

10月14日開催 参加者募集中
(画像をタップ→詳細へ)

ミッションナビゲート モニター
(画像をタップ→詳細へ)

広告