0

私はこれをやろうとして多くの問題を抱えています.cssでも可能かどうか疑問に思っています. (おそらく、PHP、Flash、または Javascript を使用して別の方法を見つける必要があるでしょう!)

基本的に、私は3つの画像を持っています。それぞれのサイズは 1920x1200 (x*y) です。左から右に配置すると、風景のイメージを形成します。水平方向にスクロールしてサイトの各部分を表示する Web ページを作成したいと考えています。3 つの画像は div 要素の背景画像であり、両側で互いに接触しています。スクロールはこれで処理される予定でした (.items が position: absolute である必要がある理由でもあります)。ほとんどの場合、これを作成することができました:

HTML:

<div class="items">
    <div class="item" id="item1"><a name="item1"></a>
         text
    </div>

    <div class="item" id="item2"><a name="item2"></a>
         more text
    </div>

    <div class="item" id="item3"><a name="item3"></a>
         even more text
    </div>
</div>

CSS:

#item1, #item2, #item3 { 
    float: left;
    width: 1920px;
    height: 1200px;
}
#item1 {
    background: #ffffff url(../../images/main/1.jpg);
}
#item2 {
    background: #ffffff url(../../images/main/2.jpg);
}
#item3 {
    background: #ffffff url(../../images/main/3.jpg);
}
/* our additional wrapper element for the items */ 
.items { 
    width: 5790px;
    position: absolute;
}

ただし、私が抱えている問題は、これを複数の画面サイズと解像度で機能させる必要があることです。私ができるようにしたいのは、各 #itemn の高さを表示ページの 100% にすることですが、div 要素が左右に表示されるのを止めないとできません。多くの場合、それらが重なり合って表示されます。

こちらの手順に従って、img を使用してみました。しかし、位置を固定または絶対に設定することで、以前は左に浮かんでいた div 要素内の画像が重なり合って表示されました。

明確にするために、私が目指している効果はこのサイトのようなものですが、ページに合わせて背景画像の高さを変更する必要があります。そうしないと、私のマシンの解像度が異なると見栄えが悪くなります。必要に応じてさらに説明を加えることができますが、問題をかなりうまくまとめたと思います。おそらくJavascript、PHP、またはFlashを使用して、これを何らかの方法で修正することは可能ですか?

編集

私が必要とするもの (background-size) を正確に実行する CSS3 プロパティがあることがわかりましたが、ほとんどのブラウザーでは実装されていません...ハックは、-moz-border-image を使用してから、php を使用して配置することです。高さと幅 px を css に修正します。私はそれをしたくありません！

4

1 に答える 1