2

我刚从学校毕业，在一个大部分已经开发好的网站上工作。开发人员是营销人员，对 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/

4

2 回答 2

0

你需要的是：

background-size: 100% 100%;

而不是封面。

于 2014-01-03T17:41:18.107 回答
0

您需要指定一件事：

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

小提琴链接

于 2014-01-03T19:35:50.467 回答