半透明(透過)な背景色を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プロパティ(スタイルシートリファレンスへリンクしています)

参考サイト:

オンラインで受講できます

ぜひ、この機会に。

直接、人と会いにくい状況が続いています。

そんな中、あなたを知りたい!という人はたくさんいます。

じゃ?どうやって?

発信するパーソナルメディアを、ブログで作りましょう。

あなたが、元々持っている、スキル・知識・価値を伝えると、人生が変わります。

オンライン 4Days 【WordPressブログ】スタートアップ講座 -第2期- 開催決定!

●休日開催コース

5月30日(土)・31日(日)・6月6日(土)・7日(日)

19時30分から21時30分(2時間)

もしくは

●平日開催コース

6月1日(月)・2日(火)・8日(月)・9日(火)

19時30分から21時30分(2時間)

例えば、5月30日(土)と6月1日(月)は、同じ内容です。

2つのコースから、

自由に組み合わせていただけます。

お申し込みのチケットは、

1日目を、

休日コース 5月30日(土)でスタート

or

平日コース 6月1日(月)でスタート

どちらなのかをお選びください。

2日目以降は、1日目 受講時にご確認いたします。

詳細とお申し込みはこちら

  • ブックマーク

この記事を書いた人