0

ここで最初に質問をどのように表現するか正確にはわかりませんが、試してみます。

ページを下に固定スクロールしたい画像があります。背景の色が異なる2番目のdivに入ると、色をスムーズに変更したいです。私はdivをソートし、画像を完璧に配置し、効果をうまく機能させました.私の唯一の問題は、パーセンテージなどを使用しているため、2つの画像を一生並べることができないことです.

私はここにあなたが見る必要がある実際の例を持っています. 一番上の「Hello」は、2 番目の「Hello」で実現したい一定量だけ中心からずれています。私はそれを起こさせることができません！助言がありますか？私は可能なjQueryソリューションを見てきましたが、今のところうまくいきません。

答えてくれてありがとう。乾杯。

4

2 に答える 2

1

ライブデモリンクはこちら http://jsfiddle.net/EtJBn/107/

こんにちは、これで簡単にできます

このようにいくつかのプロパティを定義するだけです

CSS

html, body {
    height:100%;
}

#top{
    height:100%;
    width:100%;
}

#bottom{

    height:100%;
    width:100%;
    background-color:black;
    z-index:200;
}

#topsq {
    position:fixed;
    height:175px;
    background:url("http://mattwaymouth.com/images/hello_small.png") no-repeat center top;
    left:0;
    top:50px;
    right:0;
    z-index:1;


}    

#second {
    position:relative;
    background: url("http://mattwaymouth.com/images/hello_small_green.png")  no-repeat center 50px fixed;         
    left:0;
    top:0;
    right:0;
    z-index: 200;
        height:300px;
}

HTML

<div id="top">
    <div id="topsq"></div>
</div>

<div id="bottom">
    <div id="second"></div>
</div>

ライブデモ http://jsfiddle.net/EtJBn/107/

于 2012-06-08T04:35:14.137 に答える
0

良い。理想的とは言えませんが、解決策を見つけたようです。それはうまくいきます！チャドが試してみるように言った後background-position: left center;、単純に画像を asbackground-position: center;にして、画像の片側にたくさんの余白を作ると、Photoshop をいじって 2 つを並べることができることに気付きました。今ではうまく機能し、私のすべてのブラウザで完璧に並んでいます。

ここに例があります - jsFiddle (ただし、変更する必要があったのは画像自体であるため、変更の多くは見られません)。

返信ありがとうございます。

于 2012-06-08T02:41:11.383 に答える