Question

我想创建一个带有图像背景的介绍页面，它将覆盖所有窗口。

然而，我有100％身高的问题。当我将高度设置为100％时，当我改变高度（例如：500px）时，图像不显示。

这里有什么问题？注意：图像随窗口大小的变化而变化。

这是css：

.header {
    display: table;
    height: 100%;
    width: 100%;
    position: relative;
    background: url(../img/intro.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这里是html代码：

<section class="header"> </section>

我知道存在一些类似的问题，我已经检查了它们，但我不知道是什么导致了我的例子。

这是小提琴： http://jsfiddle.net/haris244808/r8EMz/

Answer 1

您的问题是，您告诉.header父元素的宽度100%，可能没有设置宽度。你可以做两件事之一。

首先，正如Nucleo所说，将.header更改为position:absolute。这将告诉它有width的{{1}}窗口，而不是父窗口。你要添加这个CSS：

100%

第二个选项是给父级一个宽度。你会添加这个CSS：

.header {position:absolute;}

<强> Working Fiddle

这使您无需绝对定位第一张照片，因此它仍然可以推动其他事情。

编辑：我已经将新代码（第二种方法）添加到您的小提琴中，它可以正常运行并具有响应性。

<强> Second Fiddle

Answer 2

将位置值更改为“绝对”

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: absolute;
  background: url(https://pbs.twimg.com/profile_images/439990543137792000/dHiQ6YwJ_bigger.jpeg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Fiddle

Answer 3

aaan答案是：位置：绝对。

Answer 4

<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/AlexKP/pen/RVaEpX?depth=everything&order=popularity&page=49&q=services&show_forks=false" />

<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'>
<style class="cp-pen-styles">* {
  font-family: "Roboto", sans-serif;
  margin: 0;
}

a {
  text-decoration: none;
}

.landing {
  height: 100vh;
  background: -webkit-linear-gradient(top, #253B6E 70%, #f4f5f7 70%, #f4f5f7 100%);
  background: linear-gradient(to bottom, #253B6E 70%, #f4f5f7 70%, #f4f5f7 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.main-title {
  position: absolute;
  top: 2%;
  font-size: 32px;
  font-weight: 300;
  color: #f4f5f7;
}

.page {
  border-radius: 8px;
  box-shadow: 0 9px 50px 4px rgba(0, 0, 0, 0.4);
  background: white;
  width: 80%;
  height: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  overflow: hidden;
}
.page .image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #3f51b5;
  height: 100%;
  width: 50%;
}
.page .image img {
  width: 90%;
}
.page .about {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 25px;
  max-width: 50%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.page .about .main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.page .about .main .title {
  color: rgba(0, 0, 0, 0.8);
  font-size: 28px;
  padding: 16px 0 32px 0;
  font-weight: 400;
}
.page .about .main .description p {
  color: rgba(0, 0, 0, 0.7);
  font-size: 18px;
  line-height: 20px;
  font-weight: 400;
  padding-bottom: 16px;
}
.page .about .controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.page .about .controls .try {
  cursor: pointer;
  border-radius: 8px;
  padding: 8px;
  color: #f4f5f7;
  background: #3f51b5;
}

@media only screen and (min-width: 1024px) {
  .page {
    max-width: 900px;
    max-height: 700px;
  }
}
@media only screen and (max-width: 480px) {
  .landing {
    background: #253B6E;
  }

  .main-title {
    font-size: 6vw;
    font-weight: 300;
    color: #f4f5f7;
  }

  .page {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .page .image {
    padding-top: 8px;
    width: 100%;
    height: 20%;
  }
  .page .image img {
    height: 100%;
    width: initial;
  }
  .page .about {
    overflow-y: scroll;
    max-width: 100%;
  }
}
</style></head><body>
<div class="landing">
  <div class="main-title">
    Daily UI #003
  </div>
  <div class="page">
    <div class="image">
      <img src="https://net.trusted.ru/static/images/login/security/main-baner.png" />
    </div>
    <div class="about">
      <div class="main">
        <div class="title">
          Authorization should be simple
        </div>
        <div class="description">
          <p>
            One connection you receive all set of control of authentication.
          </p>
          <p>
            For authentication reliability augmentation, you won't need upgrade of the website, it is rather simple to include desirable setup in control bars.
          </p>
        </div>
      </div>
      <div class="controls">
        <a href="https://twitter.com/a1ex_dev" target="_blank">
          <div class="try">
            Try now
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >//
//
// ヽ(~_~(・_・ )ゝ
//
//
//
//
//# sourceURL=pen.js
</script>
</body></html>

Some Portfolio

如何解决介绍页面高度

4 个答案: