人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

css等で画像の上に画像を配置したい。

イベントバナーをページに掲載していて、イベントが終わったら「イベント終了」のスタンプのようなものを上に重ねたいです。
今までは、普通に画像を加工していたのですが、css等でもっと簡単に追加が出来ないでしょうか?
イベントバナーはリンクボタンなので背景設定は出来ません。
重ねたいimgにcssを設定してスタンプ画像(png)を重ねる事は出来ませんか?



●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● 匿名回答1号

<img src="スタンプ画像URL" style="background-image:url(バナー画像URL);">
でどう?
画像サイズを同じにしておけばこれで問題ないような気がするけど。


匿名質問者さんのコメント
返答ありがとうございます。 最初からイベント終了ではなくまずは通常バナー表示ですよね。 で、この方法だと意外と書き換えないとダメですよね。 出来るなら、 img src="バナーURL" を img src="バナーURL" clas="end" とするだけでスタンプが上に来るように出来ればいいのですが…

匿名回答1号さんのコメント
スタンプ画像と、ただ透明なだけの画像を二つ用意してやって、 srcを切り替えればいいと思います。 img src="透明画像URL" ↓ img src="スタンプ画像URL" img にnameを指定してやってjavascriptとかで document.xx.src=としてやれば 時限式とかで切り替えてることも出来るね。 srcを固定にしたい理由があるのならば、 位置指定がちょっと面倒になるけどレイヤーにしてやって 表示順(z-index)を変えてやるか、 透明度(opacity)を100から0にしてやればいい。

匿名回答2号さんのコメント
name 指定で document.xx とかレイヤーとか、情報が古過ぎる。 CSS3 とか知らない?

匿名回答1号さんのコメント
ああ、レイヤーってもちろんレイヤータグのことじゃないよ。 単なる「重ねあわせ」のこと。 Javascriptによる書き換えも、position宣言による重ね合わせも使わずに ひとつのimgタグだけに対するスタイル宣言だけでやる方法なら お手上げだ。すまんね。

匿名回答1号さんのコメント
いちおう、Javascriptを使った書き換えによる手だけ書いておく。 bodyタグに以下を入れれば、 class="end"としたimg要素すべてにスタンプ画像が重なるはず。 CSS使ってないくせに、タグの見た目だけはCSSでやっているように見える卑怯な手だが。 onLoad="JavaScript: var allImg = document.getElementsByTagName('img'); for(var i = 0; i < allImg.length; ++i){ if(allImg[i].className=='end'){ allImg[i].style.backgroundImage = 'url(' + allImg[i].src + ')'; allImg[i].src= 'スタンプ画像URL'; } }"
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ