• トップページへ
  • 制作実績一覧へ
  • DEVOLEN(デボレン)について
  • ブログページへ
  • お問い合わせページへ
  • DEVOLEN Twitter
  • - P R - 東大阪なび
[CSS]CSSの記述で、背景画像やテキストの上に背景画像を重ねる方法 – DEVOLEN(デボレン)
DEVOLEN(デボレン) > ブログ > HTML・CSS関連 > [CSS]CSSの記述で、背景画像やテキストの上に背景画像を重ねる方法
­

この記事は 6分ぐらい で読めますよ!


HTML・CSS関連

[CSS]CSSの記述で、背景画像やテキストの上に背景画像を重ねる方法

このエントリーをはてなブックマークに追加このエントリをmixiチェックする
css

htmlとCSSの記述で、背景画像や画像、テキストのさらに上に、背景画像を重ねる方法


少しややこしくって、なかなか使うときもないかもしれませんが、こんなこともできるよ!という感じで覚えておいて損はないかも。

少しややこしいのですが、3つの段を想像していただいて
・一番下に背景画像を設定。
・二段目にテキストや画像など。
・さらにその上、三段目に透過PNGの背景画像を配置します。

テキストやaタグをクリックできないなどの不憫はあるし、用途はだいぶ限られますが、アイデア次第で何かしら使えるのではないでしょうか。
例えば、見せたい写真の周りに透過PNG画像を使って装飾したい場合などに、
装飾画像を見せたい写真の上に、背景画像として重ねる。などが可能ですね。

以下説明と、htmlとスタイルシートの記述方法です。

この黒枠で青色の水玉模様画像を、一番下の背景画像に設定します。

下の背景画像

そしてこのオレンジ色で、真ん中透明のグラデーションがかったPNG画像を一番上にのせます。

上にのせるPNG画像

html、body内に以下のように記述。

<div id="bg">
<div id="over">&nbsp;</div><!-- //上になる背景透過画像//-->

<div id="inner">
<p>一番下に背景画像。二段目にテキスト。一番上に透過PNG画像が背景画像として重なっています。</p>
<p>一番下に背景画像。二段目にテキスト。一番上に透過PNG画像が背景画像として重なっています。</p>
</div><!-- //中身//-->

</div><!-- //一番下になる背景画像//-->

スタイルシートは以下のように記述します。

#bg{
background: url(images/bg.gif) no-repeat;/*-- 一番下になる背景画像の指定 --*/
width: 200px;
height: 200px;
z-index: -1;/*-- 下になる --*/
}
#over{
background: url(images/over.png) no-repeat;/*-- 上にのせる背景透過画像の指定 --*/
width: 200px;
height: 200px;
position: absolute;/*-- 絶対位置の指定 --*/
z-index: 1;/*-- 上にする --*/
}

これで以下のように表示されますよ。

 

一番下に背景画像。二段目にテキスト。一番上に透過PNG画像が背景画像として重なっています。

一番下に背景画像。二段目にテキスト。一番上に透過PNG画像が背景画像として重なっています。


空divで設定しているのは問題ありだと思うのですが、少し工夫してやれば空divの問題もクリアされると思います。
用途は限られますが是非テクニックの一つとして覚えてくださいな。

透過PNG画像を使用する際はコチラのJavaScriptがオススメです。

Web ≫[JavaScript]IE6でも透過PNG画像を表示することができる「unitpngfix.js」

現場のプロから学ぶXHTML+CSS

著者/訳者:益子 貴寛 堀内 敬子 小林 信次 千貫 りこ 伊藤 学 山田 あかね 西畑 一馬

定価:¥ 2,940

Amazon価格:¥ 2,940

実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~

著者/訳者:市瀬 裕哉 福島 英児 望月 真琴

定価:¥ 3,360

Amazon価格:¥ 3,360

このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加Instapaper に保存するRead It Later に保存する

3 Comments

  1. koji
    Posted 2011/04/05 at 11:31 | Permalink

    ありがとうございます。使わせて頂きました!

  2. Posted 2011/04/06 at 01:00 | Permalink

    kojiさん
    お役に立ちましたようでよかったです^^

  3. 神崎
    Posted 2012/12/27 at 22:38 | Permalink

    お聞かせ下さい。
    >「img」に以下のCSSを記述してください。
    IMGに記述するとはどういう意味でしょうか?
    CSSに記述するということでしょうか?
    HTMLにはどのように記述すればよろしいのでしょうか?

3 Trackbacks

  1. [...] CSSのみでボタンなどの画像が少し薄くなる効果マウスオーバー動作で、ボタンやリンク画像のニュアンスを変えたい人にぴったり。このサイト(http://www.devolen.com/blog/html_css/rollover_alpha/)を参考にしてみて。設定も ものすごく単純だし、動作も軽い。特に動作時のデザイン差に凝っているわけでなければ、こういった効果でも十分ユーザーに動的な印象も与えるし、直ぐにリンクだって分かる。 « Worldpressにも対応  » [...]

  2. [...] http://www.devolen.com/blog/html_css/rollover_alpha/ @addthis [...]

  3. [...] http://www.devolen.com/blog/html_css/rollover_alpha/ [...]

コメントする

Eメールアドレスは公開されません。 *マークは必須項目です。

*
*
*

検索

カテゴリー

最近の投稿

人気記事

タグ

3D Android css Flash GIFアニメ Google hatena HTML iPhone JavaScript Photoshop関連 UI Webサイト Webツール WordPress かわいい はてブ アイコン アドオン イラストレーター インスピレーション カスタム クリエイティブ サイト制作 シンプル タイポグラフィ チュートリアル ディズニー デザイン パンくずリスト フライヤー プラグイン ポスター ロゴ 便利 写真・画像関連 動画・映画 壁紙 広告 無料 自然 芸術 雑記 音楽