2012.09.23
css

背景にではなく画像にボタンを乗せる

imgにボタンや他のimgを重ねて表示する方法です。

CSSでbackgroundに画像を配置して、その上にボタンなどを配置する方法はよく使われますが、今回はHTMLで<img src=”abc.jpg”/>のようにした画像の上にボタンを配置する方法。

重ねる…といえば

z-index

というCSSのプロパティを使います。

では比較するために、まずはbackgroundに画像を配置(背景画像として配置)した場合の方法。

下記のように表示させる場合です。

下記のソースの場合は、事前に背景に配置する画像を「bg.png(幅300px・高さ200px)」、ボタンを「button.png(幅240px・高さ40px)」で作成。

CSSのソース
.bg {
	background:url(画像までのパス/bg.png) no-repeat;
	width:300px;
	height:200px;
	margin:10px;
	float:left;
}
.button1 {
	background:url(画像までのパス/button.png) no-repeat;
	width:240px;
	height:40px;
	margin:150px 30px 10px 30px;
}
HTMLのソース
 <div class="bg">
  <a href="#"><div class="button1"></div></a>
 </div>

次に、背景画像ではなくimgで上記と同じように表示したい場合の方法。

下記のように表示させる場合です。

下記のソースは事前に画像を「pic.png(幅300px・高さ200px)」、ボタンを「button.png(幅240px・高さ40px)」で作成。

CSSのソース
.pic {
	width:300px;
	height:200px;
	margin:10px;
	float:left;
	position:relative;
}
.button2 {
	background:url(画像までのパス/button.png) no-repeat;
	width:240px;
	height:40px;
	position:absolute;
	z-index:100;
	top:150px;
	left:30px;
}
HTMLのソース
<div class="pic_bg">
       <div class="pic"><img src="画像までのパス/pic.png" />
         <a href="#"><div class="button2"></div></a>
    </div>

背景にではなく画像にボタンを乗せる

z-indexは値が大きいほど上に重なって表示されます。

上記のソースでは100としましたが、z-index:1;としてもOKです。
指定していない場合は0となります。

また今回の場合、z-indexを使うときに必要になってくるのは

position:absolute;

です。

親要素(今回は.pic)にposition:relative;を指定し、その子要素(今回は.button02)にposition:absolute;を指定することでz-indexが反映されるようになります。

Memo:
position:absolute;とした場合はmarginではなく、top、left、right、bottomで位置を指定します。

私のポートフォリオも同じ要領で画像の上にボタンを配置しています。

今回はボタンとしましたが、画像も重ねたりできるので、使い方次第でいろいろできそうですね。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP