WEB制作のメモ帳

衆トップページ -> WEB制作のメモ帳 -> css -> 「position」で背景画像にリンクを設置

「position」で背景画像にリンクを設置

2011-06-07

css

「position」で背景画像にリンクを設置

背景画像を一枚絵で設定しているページで
部分的にリンクを貼りたいとの要望があったのでCSS「position」プロパティで対応

無料ホームページ素材

SOURCE
■HTML
<div class="link"><a href="リンク先URL">○○</a></div>

■CSS
.link{
 position:absolute;
 top:100px /*位置を指定*/;
 left:100px;
}
.link a{
 width:100px; /*リンク領域を指定*/;
 height:100px;
 display:block;
 text-indent:-9999px;
}
.link a:hover{
 background:url(ロールオーバー画像); 
}

※参考までに「position」プロパティ
position:absolute; 絶対配置
position:relative; 相対配置
position:static; 通常配置(指定しない場合はこれ)
position:fixed; 固定配置(IE6不可)
参考サイト
表示位置の調整(position)
http://www.stylish-style.com/csstec/base/position.html

WEB制作の定番書