Question

所以我希望我的网站在页面中间显示带有静态背景图片的内容，而不是this page。我怎么能让它工作？我已经看过了我可能做的一切，但我无法弄清楚。有什么想法吗？

Answer 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;
}

Answer 2

他们正在使用名为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>

Answer 3

使用“position：fixed”作为背景图片。然后给它一个低z指数把它放在一切。只需将其他所有内容放入正常状态。 http://www.w3schools.com/cssref/pr_class_position.asp 背景图片的CSS应如下所示：

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

其他所有内容都将保持不变。

Answer 4

保留背景图片的background-attachment: fixed。

要将内容保留在中间，请添加以下CSS

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

container是具有主要内容

的元素的id

Answer 5

html

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

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/rgZgY/

与网站的背景图片在中部

5 个答案: