0

したがって、このページのように、ページを下に移動している間、私のウェブサイトのページの中央に静的な背景画像のあるコンテンツを配置したいと考えています。どうすればそれを機能させることができますか？私は可能な限りすべてを見てきましたが、それを理解することはできません。何か案は？

4

5 に答える 5

1

彼らは、この効果を得るために CSS を使用した可能性が高いです。最初に行う必要があるのは、背景画像を設定することです。

body {
  background-image: url(path/to/image.png);
}

次に、background-attachmentプロパティを使用してバックグラウンド アタッチメントを設定する必要があります。

body {
  background-image: url(path/to/image.png);
  background-attachment: fixed;
}

これにより、ページとともにスクロールする背景画像という、必要な効果が得られます。画像が十分に大きくないと、背景色が透けて見えることに注意してください。

編集：プロパティを設定することで、背景を繰り返さないように設定できbackground-repeatます。

body {
  background-image: url(path/to/image.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

編集:プロパティを介して背景の位置を設定できbackground-positionます。それを中心に置くために、私たちはそうします。

body {
  background-image: url(path/to/image.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}
于 2012-06-06T01:49:22.067 に答える
0

html

<body>
<div id="container">
<h2>Hi how are you?
content goes here
</h2>
</div>
</body​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​&gt;`

CSS

body {
background-image: url(/path/image.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position:top center;
}
#container {
background: white;
margin: 20px auto;
padding: 20px;
width: 400px;  /* change to suit need*/
}​

表示例: http://jsfiddle.net/rZgY/

于 2012-06-08T10:16:35.037 に答える
0

jScrollPane というライブラリを使用しています。

http://jscrollpane.kelvinluck.com/

関連するマークアップを以下に示します。インスペクターで検索してください。そうすると、スクロールすると「トップ」プロパティが変更されていることがわかります。

<div class="jspPane" style="padding: 0px; width: 569px; top: -271px; "><div id="tab1" class="tab_content" style="display: block; ">
                            <div class="inner">
                                    <div class="review_block">
                                        <figure><img src="http://www.examiner.com/images/blog/EXID43556/images/vote_check_image.jpg" width="190" height="190" alt=""></figure>
                                      <div class="img-wrap"><strong>Vote, Vote, Vote!!</strong>
                                        <p>Vote fast!</p>
                                        <strong>The votes on MinecraftServers.net have reset! Get us over a hundred or two right off the bat at 12AM, and we will be the best!  For the next week, we are raising the reward amount too 20 diamonds per vote!  Happy voting, Thanks!</strong></div>
                                    </div>
                                  <div class="review_block">
                                        <figure><img src="images/diamond.png" width="190" height="190" alt=""></figure>
                                        <div class="img-wrap">  
                                            <strong>New Website!</strong>
                                            <p>It's awesome!</p>
                                        <strong>We love the new look of things, it's cleaner and up-to-date!</strong></div>
                                  </div>
                                    <div class="review_block">
                                        <figure><img src="images/page1_img1.jpg" width="190" height="190" alt=""></figure>
                                      <div class="img-wrap"><strong>New Domain Name!</strong>
                                        <p>www.gld.bz</p>
                                        <strong>New Domain Name! Easier to remember, type, and it actually fits on signs and in chat better! Just a shortcut for www.gldesert.com</strong></div>
                                    </div>
                                    <div class="review_block">
                                      <figure><img src="images/arrow.png" alt=""></figure>
                                      <div class="img-wrap"><strong>Upgraded Server!</strong>
                                        <p>So much faster, and 0 lag!</p>
                                        We went to the furthest extent possible, We rented out Google.... Ok, maybe not Google, but it's close enough. We have 512GB SSD, 32GB of RAM, 8 Core CPU @ 3.8GHz a core. Infact, here is the servers temporary theme song!<embed type="application/x-shockwave-flash" wmode="transparent" src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://gldesert.com/music/better.mp3" height="27" width="320">                                 </div>
                                    </div>
                              <div class="review_block">
                                      <figure><object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/lp-62YcdpxU&amp;autoplay=0&amp;loop=1&amp;volume=" 25"=""><embed src="http://www.youtube.com/v/lp-62YcdpxU&amp;autoplay=0&amp;loop=1&amp;volume=" 25"&akkiwfullscreen="1" type="application/x-shockwave-flash" width="190&quot;" height="144"></object></figure>
                                        <div class="img-wrap">  
                                            <strong>Video Contest is over!</strong>
                                            <p>And the winner is.... Silver Vapour!</p>
                                           Congrats SilverVapour! You have received a free Captain Rank! Awesome job with the video!
                                        </div>
                              </div>
                              </div>
                            </div><div id="tab3" class="tab_content" style="display: none; ">
                              <div class="inner"></div>
                          </div></div>
于 2012-06-06T01:49:11.777 に答える
0

背景画像には「position:fixed」を使用してください。次に、すべての背後に配置するために低い z-index を指定します。あとは普通に入れるだけ。 http://www.w3schools.com/cssref/pr_class_position.asp 背景画像の css は次のようになります。

#backgroundImage{
width:100%;
height:100%;
position:fixed;
z-index:-1;
}

他のすべては同じままになります。

于 2012-06-06T01:51:07.427 に答える
0

background-attachment: fixed背景画像の を保持します。

コンテンツを中央に配置するには、次の CSS を追加してください

#container {
    margin: 0 auto;
    padding: 0 0 20px;
    width: 1009px;
}

container は、メイン コンテンツを持つ要素の ID です。

于 2012-06-06T07:08:03.790 に答える