Question

我正在尝试重新创建一个页面，但我会给它清理css。我不明白为什么在原始页面上第一张图像完全显示在我的内部而不是。 CSS对我来说似乎是一样的。这是页面摘录

<section id="mega-img">
  <div class="inner">
    <h1>title</h1>

    <p>Some text</p>
  </div>
<div class="big-bg"></div>

这是相关的CSS。网站使用bootstrap作为主要样式工具

#mega-img {
  color: #fff;
  overflow: hidden;
  position: relative;
  height: 100%;
  padding: 5em 0 3em 0;
  width: 100%;
}
#mega-img .inner {
  color: #fff;
  margin-left: 5%;
  width: 45%;
  padding: 15px;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.2);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000, endColorstr=#330000);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000, endColorstr=#330000)";
}
#mega-img .inner h1 {
  color: #fff;
  font-weight: bold;
  line-height: 0.8em;
  font-size: 4em;
}
#mega-img .inner p {
  color: #fff;
  font-weight: bold;
  line-height: 1.2em;
  font-size: 1.2em;
}
.big-bg {
  background-image: url(../images/photo/foto_big_home.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

我哪里错了？

This is my page

This is the original page

它们只是CSS改变的同一页面。我希望我的页面显示原始图像。

Answer 1

您的原始网页有html,body { height: 100%; }。将其添加到新网站，然后#mega-img { height: 100%; }将有一些成长。

观看此视频，了解https://www.youtube.com/watch?v=hExwnLlj2xk

的详细解释

Answer 2

看起来你已经删除了新样式表中的html和body height。原始站点声明body和html为100％，尝试将其重新添加回您的CSS。如果你需要一个jfiddle，请告诉我。：）

整页图片

2 个答案: