Question

我希望我的目标网页顶部有一张图片，可以100％拉伸。如果我向下滚动，我应该看到着陆页的其余部分。

我正在使用WordPress。在着陆页的开头，我将此DIV标记放在剩余的着陆页内容之前：

<div id="top_image_div"></div>

这是这个DIV的CSS：

#top_image_div{
    width:100%;
  background: url(http://localhost/webaddress/wp-content/uploads/2015/09/zzzzzzzzzzzz.jpg) no-repeat center center; 
  padding:0;
  height:100vh;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我认为这个vh（垂直高度）可能是个问题..

页面有时会加载，有时它根本不会加载。或者，首先显示剩余内容，没有顶部图像。刷新后，显示顶部图像。

有替代方案吗？如何将顶部切成宽度和高度？请怜悯，我只是一个初学者。

提前谢谢。

Answer 1

这是我使用的，每次都有效：

following-sibling::text()[string-length(normalize-space())>string-length('&nbsp;')]

#top_image_div {
  position: absolute;
  background: url(http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg) no-repeat center center;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  min-height: 100vh;
  min-width: 100vw;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden;
  z-index: -1;
}
.someContainer {
  padding: 10px;
  background-color: rgba(255, 255, 255, .42);
}

您也可以在某个位置执行此操作：相对容器，它只会填满该容器。

例如：

<div id="top_image_div"></div>
<div class="someContainer">
  Some Content here
</div>

<div class="top-area">
<div id="top_image_div"></div>
</div>
<div class="someContainer">
  Some Content here
</div>

#top_image_div {
  position: absolute;
  background: url(http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg) no-repeat center center;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  min-height: 100%;
  min-width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden;
  z-index: -1;
}
.top-area {
  min-height: 100vh;
  position: relative;
  padding: 0;
  margin: 0;
  color: black;
  padding: 15px;
}
.top-area > .header-overlay {
  background-color: rgba(0, 0, 0, .35);
  color: white;
  padding: 15px
}
body {
  margin: 0;
}
.someContainer {
  padding: 50px 20px;
  min-height; 200px;
}

视口高度不适用于首页加载

1 个答案: