2

このように背景画像を適用しました

HTML

<div id="background">
    <img src="stock.png" class="stretch" alt="image" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

次のページにリンクできるように、画像の一部をクリックできるようにしたいのですが、これを行う簡単な方法はありますか?

4

3 に答える 3

3

いつでもリンクrelativeを作成z-indexして、適切な位置にリンクできます。

<div id="background">
    <img src="stock.png" class="stretch" alt="image" />
    <a href="path/to/url/" class="link"></a>
</div>

次に、次のようなもの:

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}
.stretch {
    width:100%;
    height:100%;
    z-index:1;
}
.link {
    width:200px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;
    display:block;
    z-index:2;
}

次に、CSS や画像を使用してリンクを移動し、スタイルを設定します。

于 2013-03-20T22:14:07.807 に答える
1

で別のdivを追加position: absolute;し、これで彼の位置を定義します

left:100px;
top:100px;
于 2013-03-20T22:10:38.217 に答える
1

これは古い質問であることは承知していますが、私の意見では、これを行う最も簡単で最良の方法はイメージ マップを使用することです。基本的に、画像上でクリック可能な形状を定義できます (長方形、円、さらには多角形ですが、私はそれらを使用したことはありません)。形状の座標とサイズはすべて画像に関連しているため、非常に柔軟です。

http://www.w3schools.com/tags/tag_map.aspで使用方法が説明されています。

于 2014-07-24T17:42:42.843 に答える