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

the html

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

The 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*/
}​

Example of how it appears: http://jsfiddle.net/rgZgY/

于 2012-06-08T10:16:35.037 回答
0

他们正在使用一个名为 jScrollPane 的库。

http://jscrollpane.kelvinluck.com/

相关标记如下，您应该在检查器中搜索它。当你这样做时，你会看到'top' 属性随着你的滚动而改变。

<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

使用“位置：固定”作为背景图像。然后给它一个低 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 回答