3

私は開発に不慣れで、少し難しいと思われるタスクを任されています。

ナビゲーションに私たちについてのリンクと連絡先リンクがある1ページのWebサイトを作成する必要があります。ユーザーが私たちについてをクリックすると、ユーザーの画面はページのそのセクションにスクロールし、同じことが私たちに連絡する必要があります。私はこれを達成することができました。

何が必要ですか?

ユーザーの画面の幅と高さをカバーしたい背景画像を使用しているため、ユーザーの画面が大きい場合は2番目のセクションが表示されません。

これは私が物を積み重ねる方法です：

<div class="header">
<img class="logo" src="/logo.jpg">
<a href="#about" class="link">
<a href="#contact" class="link">
</div>
<div class="part1">
some content
</div>
<div class="part2" aboutus" id="about">
About us
</div>
<div class="part3 contactus" id="contact>
Contact us
</div>

したがって、パート 1 は、ヘッダーとともにユーザーが最初に目にするものです。

質問：

part1 にのみ表示され、サイズの大小に関係なく、ユーザーの画面の幅と高さ全体をカバーする背景画像を表示するにはどうすればよいですか。 JQuery または何らかの CSS 構造化が必要なのは確かですが、どこから始めればよいかわかりません。

これを達成するにはどうすればよいですか?

4

3 に答える 3

2 
 .part1{
    background: url(http://someurl.com/someimg.png);
    background-size: 100% 100%;
    width:100%;
    height:100%;
 }

背景サイズを設定し、div を高さと幅いっぱいに設定します

于 2013-08-24T22:03:20.573 に答える
1

CSS:

.part1 {
    background: url(bkgd.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
}

JS: jquery の使用

$(window).resize(function () {
    $(".part1").css("min-height", $(window).height());    
}); 
$(document).ready(function () {
    $(".part1").css("min-height", $(window).height());
});

更新されたデモを見る

更新: set to cover キーワードを.part使用して背景サイズを 調整し、背景ビューを中央に配置します。また、jquery を使用して、ウィンドウの高さに等しいbackground-size最小の高さを設定し、ビュー ポートに動的に合わせます。.part

于 2013-08-24T22:01:21.150 に答える