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

参考サイト:

散財したアイテム

最近の散財はこちら!

出張に便利そうなコンセントを買った!塩は、ぬちまーす。

【WordPressブログ スタートアップ講座 開催決定しました】

11月3日 祝日 水曜日
・10時から18時
・Kitchen Bee(4名)とオンライン(4名)のハイブリッド開催です。
お申し込みページはこちら

12月30日  木曜日
・10時から18時
・Kitchen Bee(4名)とオンライン(4名)のハイブリッド開催です。
お申し込みページはこちら

オンラインのスタートアップ講座、気になっていたけど、4日間に分かれていて、スケジュールが、、というあなた。オンラインでも1日でOKなスケジュールを作りました。

ぜひ、この機会に、情報発信の母艦を一緒に作りましょう。

また、「ブログをスタートしたい」という方に、すごく良い講座あるよっと、ご紹介いただけると、飛び上がって喜びます。

よろしくお願いします。

(なお、リアルの会場は、Kitchen Beeにて人数を制限し、感染症対策を行って開催します。)

追伸、

また、11月3日の19時から20時の1時間、ものくろキャンプ交流会を開催します。こちらは、少人数ですが、Kitchen Beeのお席もご用意できる予定です。

オンラインとハイブリッド開催しますので、オンライン参加も大歓迎です。イベントを立ち上げますが、まずは、カレンダーに丸印を!

ブログスタートアップ講座のお申し込み告知ページを見逃したくない!という方は、下のメールマガジンにご登録ください。

お申し込み開始時にご案内をお送りします。

無料メルマガ発行中

メルマガも2021年は頑張って書いています。ぜひ登録して読んでくださいね。(無料です)

メールマガジン
無料で購読
メールアドレス *
* 必須項目

【案内板】

このブログをはじめて読んだあなたへ
ぜひ読んでもらいたい記事を用意しました。

オンラインショップあります

↓ 下のバーナーをクリックすると移動します。


Youtube

  • ブックマーク

この記事を書いた人

テストテスト