0

この Web サイトに表示されているものと同じ効果を作成しようとしています。

http://www.mintdigital.com

そのように画面の下部からdivを開始するにはどうすればよいですか?

4

3 に答える 3

0

この場合、それはparallax効果です。背景が入っていposition:fixedて、コンテンツが入っている可能性がありposition:absoluteますtop:90%

jsFiddle here

HTML

<body>
    <div id="content">
    </div>
</body>

CSS

#content{
    position:absolute;
    top:90%;
    width:100%;
    height:800px;
}
于 2013-10-16T09:37:31.423 に答える
0

次に例を示します。

<div id="container">
    <p>put your stuff in here</p>
</div>

そしてここにcssがあります：

#container{
    width:100%;
    min-height: 200px;
    position: absolute;
    top:95%
}

これでうまくいくはずです。

編集: または MLeFevre が言うようにそれを行う別の方法は、その上に div を作成することです。以下に例を示します。

<div id="empty_space"></div>
<div id="container">
    <p>put your stuff in here</p>
</div>

このCSSで：

#empty_space{
    width:100%;
    height: 90%;
}
#container{
    width:100%;
}
于 2013-10-16T09:37:50.763 に答える
0

この Web サイトに表示されているものと同じ効果を作成しようとしています。

http://www.mintdigital.com

そのように画面の下部からdivを開始するにはどうすればよいですか?

あなたの質問はあなたのリンクに対応していません。スクロール時にDIVと重なる背景を置きたい場合は、次のようにする必要があります。

HTML

<body>
    <div class="bkg"></div>
    <div class="content></div>
</body>

CSS

.bkg {
    position: fixed;
    left: 0;
    top: 0;
    background: url('/static/img/link_arrow.png');
    overflow: hidden;
}
.content {
    background: white /* or anything you like */
    margin-top: 90%
}

あなたの質問を満足させて、下部のツールバーまたは画面の下部にある何かを修正したい場合は、次のようにする必要があります。

HTML

<body>
    <div class="foot-fixed"></div>
    <!-- rest content here -->
</body>

CSS

.foot-fixed {
    position: fixed;
    left: 0;
    top: 100%;
    width: 100%
    overflow: hidden;
    margin: -50px;
    height: 50px;
    z-index: 100;
}

とにかく、動作する例があれば、Firefox を使用している場合、または他の一般的なブラウザーの組み込みツールを使用している場合は、いつでも FireBug でリバース エンジニアリングできます。

于 2013-10-16T11:00:35.597 に答える