文章の背景を透過して画像を表示:CSS小技

ブログが作りたい!CSSの小技 > 文章の背景を透過して画像を表示:CSS小技

文章の背景を透過して画像を表示:CSS小技

文章の背景を透過して画像を表示:CSS小技

CSSの小技(22)

雑誌などをぺらぺらめくっていると、写真と文章を重ねて掲載しているページをよく見かけます。これちょっと、こじゃれた感じに見える場合があります。

さて、ブログ上で写真と文章を重ねて表示したい場合は、どうしたものでしょうか?ただ重ねればいい?

それって、もっさりしたり、文字が読み難くなってしまわないかしら?

そこで今回は、文章の背景を透過して画像を表示する CSSの小技をご紹介します。


文章の背景を透過して画像を表示とは?

次のように、文章の背景を透過させて、背面にある写真がうっすら透けて見えるような形です。

文章の背景を透過して画像を表示する

比較用に、サンプルを用意しました。良かったら、サンプルをご覧になってみてください


文章の背景を透過して画像を表示する方法

1:ソースコード

(1)HTMLコード
(2)CSSコード

2:ポイント解説

外側に「div.back-image」、その内側に「div.text-area」を入れている感じです。そしてさらに「div.text-area」の中に文章が入ります。

「div.back-image」には、背景画像(background-image)をセットします。

「div.text-area」では、背景色(background-color)を指定し、さらに透過(opacity)をかけることで、上述の背景画像がうっすら見えるようにしています。

3:CSSハック付き

IEが「opacity」に対応していないので「filter」を使っています。

また、Firefox1.5以前に対応させるために「-moz-opacity」も入れておく方が良いようです。

前の記事へ
次の記事へ

次回予告

次回は、リストマークに背景画像を指定するときの CSSの小技をご紹介したいと思います。


関連記事

CSSに関連する記事の一部を、ご紹介します。

作成日:2009/05/15 更新日:2009/05/15

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

No title

ありがとうございます。
これをやりたくて、検索に丸っと1日費やしましたが、
納得出来るものが見つかりませんでした。

しかし、この記事で解決致しました。
IE 火狐 OPERA
全てで、表示出来ました。(サファリはまだ試しておりませんが・・)
小難しいタグと理屈ばかりのページと違い、
画像もあり、
自分が求めているものが、直ぐにわかりました。
(何分初心者なので、途中でお腹がいっぱいになっちゃいます)

私はブログではなく、普通のサイトですが、
ここのブログの記事は、他の物も
本当に、かゆい所に手が届く!と、思います。
また、お世話になります。

本当に、ありがとうございます!!!

一応、道のりをちょこっと・・・・

gifで、透過と白のドット(16×16程度の物)をつくり、
クラスの背景に入れてみました。
が・・・
文字まで、ドット???になって見難いのです。

透過させて、pngで保存したものを背景に設定するのは、
上手く出来ました。
文字も綺麗に出ます。
しかし、透かして見せたい、背景素材によって、
透過の度合いを変えてあげないと、
見る人には見難い状態になります。
濃い背景だと、pngで作る透かし具合を抑えないと駄目でした。
何度も作る手間を考えれば、
CSSで、全てが指定が出来るのは、楽です。

本当に、感謝です!

8日、9日、透過

検索っこさん、こんにちは!( ・∀・)ノへろー
コメントありがとうございます。

丸っと1日、お疲れさまでした。
うまいこといったようで、何よりです。(´▽`)♪らーらーらー

pngだと、そういうこともあるんですねー。
勉強になりました。

今後もどうぞよろしくお願いします。ヾ(*´∀`*)ノ

承認待ちコメント

このコメントは管理者の承認待ちです

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/509-c4bb750d
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて