2017-06-08 6 views
0

どのようにして主要な背景画像(トポグラフィ)を最上部から最下部までどのようにして開始することができますか?異なる要素による重なり合った背景画像

黄金の「棒/要素」と青の「棒/要素」の機能は、アコーディオンのようなものです。したがって、それらをクリックすると、その下の要素が表示され、その逆の要素が表示されます。したがって、地形は金色と青色のバーを重ねて表示され、次のセクションに続き、別のバーまたは表示される要素になります。トポグラフィイメージは、ページ全体に壊れてはいけません。

website demonstration

答えて

1

それはあなたが地形によって何を意味するかは明らかではないが、あなたがイメージがページの下部に上部と端から開始したい場合は、以下の方法で使用することができます。

CSSを:

.background { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    left: 0; 
    top: 0; 
    pointer-events: none; 
} 

HTML:何THI

<body> 
    <span class="background"><img src="xxxxx" /></span> 
    <!-- your content goes here --> 
</body> 

bodyタグの高さと等しいdivを作成し、常にページの左上隅に揃えます。画像が歪んで表示されることがあります。

こちらがお役に立てば幸いです。

+0

あなたの提案は、他のすべての要素の上に絶対的な要素を持つことですか? –

+0

「主な背景画像(地形)」とは、地形パターンを持つ投稿の添付画像の背景画像です。 –

+0

うん、それは絶対位置を与えることは、常にあなたの要素の上にあることを確認します。それを左上の0にすると、ページの左上隅に常に表示されます。また、幅を100%にすると、ページ全体を上から下にカバーするようになります。 – viCky

関連する問題