3

このWebページで見ることができる流動的な背景画像効果を実現したいと思います：http： //217.116.9.130/test2.html（zara.comから取得）

ブラウザのサイズを左に変更すると、画像内の女性はサイズ変更とともに左に移動します。zara.comからコードを取得しましたが、その効果は私が知らない言語によって行われていると思われます。

jquery、css、ajax、またはphpを使用してそれを行う方法を知っている人はいますか？

どうもありがとう

4

5 に答える 5

4

あなたはおそらくこれを探しています：http：//css-tricks.com/perfect-full-page-background-image/

実装は非常に簡単なので、追加のコメントは必要ありません。

于 2011-06-17T11:02:30.537 に答える
3

css3カバープロパティを使用できます。それのための

.container{
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

このリンクを確認するには http://css-tricks.com/perfect-full-page-background-image/

于 2011-06-17T11:03:32.997 に答える
0

Javascriptで使用されるonResizeメソッドがあるだけなので、ブラウザが変更されると、背景画像の位置のCSSが変更されます。

画像にIDを付けます。id="fullImage"

次に、javascriptを使用してleft:;cssスタイルを操作します。

サイズをleft変更すると、上下に変化します。

これはそれを行う必要があります：

var el = document.getElementById（fullImage）、
width = window.innerWidth、
imageWidth=[ここの画像の幅];
window.onresize = function（）{
  el.style.left = imageWidth --width + "px";
}
于 2011-06-17T11:06:32.357 に答える
0

cssスタイリングを行う

background-position: center center;

他のオプションは

center top
center bottom
left top

等...

于 2011-06-17T10:59:48.210 に答える
0

たとえば、背景画像がbodyタグに含まれている場合、CSSには背景画像の割り当てが含まれている必要があります。

top: 0;
bottom: 0;
left: 0;
right: 0;

このように（ウィンドウのサイズが変更されると）、背景はすぐに変更されます。モーダルダイアログにオーバーレイを提供するための同じ原則。

于 2014-04-03T16:32:07.433 に答える