2

次の問題を解決するための創造的な解決策があることを願っています。

#containter背景画像が適用された

#container {
   height:400px;
   width:100%;
   background-image: url(http://cl.ly/NEvg/kv.jpg);
   background-repeat:no-repeat;
   background-size: 1000px;
   background-position:center 0px;
}

私が持っている画像には、クリック可能なリンクを配置したい領域があります。

ここに画像の説明を入力

この例の画像a#squareでは、緑色の四角形の上に非表示を配置して、四角形のみをクリックするとリンクが起動されるようにします。

ただし、問題は、ブラウザウィンドウをスケーリングすると背景画像が移動することです（移動したいので、これ自体は問題ではありません）が、リンクは移動しません。

このライブの例を参照してください: http://jsfiddle.net/KDag7/

画像内の四角形に沿ってリンクを移動させるクリエイティブな CSS の方法はありますか?

ヒントとコツをありがとう。

よろしく、マット

4

2 に答える 2

1

質問の画像の例 (ファイアウォールが jsFiddle の画像をブロックした) を使用すると、探しているものが理解できれば、次の css を使用できます。

 position:absolute;
 top:158px;
 left:50%;
 margin-left:64.5px;

この jsFiddle を参照してください: http://jsfiddle.net/KDag7/21/

于 2013-02-28T17:26:48.580 に答える
1

ここに更新フィドルがあります。position:relative;メイン画像とposition:absolute;リンクに追加して、親に揃えました。リンクの配置は、次の方法で実現できます。

position:absolute;
top:153px;
left:50%;
margin-left:63px;
于 2013-02-28T17:27:58.910 に答える