0

ウィンドウに合わせてサイズを変更する背景画像があります。背景画像の単語がリンクを表すようにしたい。私のアイデアは、空で透明なdivを作成し、背景画像の単語の上に配置することでした。そのdivをクリックすると、対応するリンクがアクティブになります。

divの配置に問題があります。ウィンドウのサイズを変更したときに、背景画像の単語との位置合わせを維持できないようです。

HTML：

<div id="wrapper">

    <div id="bespoke">
        I want this to always be aligned with "Bespoke" in the background image
    </div>

</div>

CSS：

html { 
    background: url(main.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
}

#wrapper {
    position: relative;
    top: auto;
    margin: auto;
    text-align: center;
    height: auto;
}

#bespoke {

}

デモ：

http://jsfiddle.net/DzC3V/1/

注：jQueryがこれを実現するための最良の方法である場合、私はそれを使用してもかまいません。

4

3 に答える 3

0

i think the best way to do this is to use media queries, its a bit of a drag, but it will work

于 2013-02-09T20:52:36.663 に答える
0

私の意見では、jqueryは必要ありません。CSSとパーセンテージによるポジショニングでうまくいくはずです。次を試してください

#yourObeject {
     position: absolute;
     top: 30%;
     left: 30%;
}

divを適切に配置するのは難しいです。しかし、それは機能するはずです

これがニーズに合わない場合は、実際に画像マップを実行して、jqueryでサイズを変更してみてください。

于 2013-02-09T21:46:00.113 に答える
0

画像をdivに設定できます。また、z-index：1を使用して、その上に空のdivを配置できます。したがって、両方をより適切に制御できます。

于 2013-02-09T22:27:30.087 に答える