Question

我刚从学校毕业并在一个已经开发的网站上工作。开发人员是营销人员，并不太了解html，css，尤其是javascript。我正在构建一个模仿单页网站的自定义页面，但我似乎无法使背景图像可以恢复和滚动。这是html和css的一点。

<article class="panel_kingdom">
    <section>
        <div class="panel" id="first"></div>
    </section>
    <section>
        <div class="panel" id="second"></div>
    </section>
</article>

CSS：

.panel {
z-index:50; 
    top:0; 
    left:0; 
height: 100%; }

.panel_kingdom #first {
background: url(../img_wild/back30_2.jpg) no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; }

我可以将位置指定为绝对位置或固定位置，但图像会显示但不会滚动。我似乎无法使“面板”具有相对位置和显示而不设置特定的像素高度。任何帮助，将不胜感激。

小提琴：http://jsfiddle.net/VGHLe/

Answer 1

您需要的是：

background-size: 100% 100%;

而不是封面。

Answer 2

您需要指定一件事：

display:table

CSS

.panel {
position:relative;
    top:0; 
    left:0; 
height: 100%;
    display:table;/*This was needed.*/
}

.panel_kingdom #first {
background: url(http://farm6.staticflickr.com/5532/11710736156_628ce8eba0_s.jpg) no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}        
.panel_kingdom #second {
background: url(http://tctechcrunch2011.files.wordpress.com/2012/09/om-nom.png) no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

<强> Fiddle link

调整可滚动的背景图像

2 个答案:

CSS