Question

我在低透明度（div.animated）的div中有一个动画gif，就像全屏，宽度和高度100％的背景。但是，当我尝试在第一个具有固定大小和位置绝对位置之后放置div（div.square）以便高于它时，上部div（div.animated）不适应它的高度全屏。

我不能像div.animated的容器一样使用div.square，因为第一个会覆盖第二个带有背景动画的gif，我只需要降低gif的不透明度，而不是内容。

固定的位置对我来说并不实用，因为我想要一个具有溢出自动功能的响应式网页。

总而言之，我需要将div放在另一个不透明度较低的div之上。

我尝试做的一个例子：

Link

<div class="animated"></div>
<div class="square"></div>

Answer 1

我真的试图解释你的问题。但你可以用他们的名字来称呼div，例如：我想在animated前面square，全宽等等......

对于后台使用类似于CSS中的body的内容：

body {
    background: url(img_flwr.gif);
    background-size: cover;
    background-repeat: no-repeat;
}

来源：w3school.com

要将另一个div放入div，请在HTML中执行此操作：

<div class="animated">
   <div class="square"></div>
</div>

Answer 2

我想我得到了你想要/需要但我使用的位置：固定并且它仍然响应......

.square{
  background-color: pink;
  width: 500px;
  height: 500px;
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -250px;
}

请参阅CodePen code

<强>更新

如果你需要.animated有比.square更高的高度你可以做这样的事情，保持你的html和css逻辑：

$(document).ready(function(){

  var squareArea = $(".square").height() + ($(".square").offset().top * 2);

  if($(".animated").height() < squareArea)
    {
      $("body").height(squareArea);
      $(".animated").height(squareArea);
    }
});

JSFiddle code

Answer 3

以下是您可以执行的操作 - 无论内容如何，强制后台div采取全高度，请使用以下CSS：

#container {
  display:block;
  border:1px solid black;
  height:100vh;
  width:100%;
  background:url('http://media.giphy.com/media/SZQslH8yhprFu/giphy.gif') center center no-repeat;
  background-size:cover;
  overflow:auto;
  margin:0;
  padding:0;
}
#content {
  height:auto;
  width:50%;
  margin:0 auto;
  text-align:center;
  background-color:rgba(110,110,110,0.75);
  padding:10px;
}

使用overflow:auto可以滚动内容，同时保持页面背景处于同一位置。

这是显示结果的CodePen demo 。

尽管有内容div，但div容器的高度为100％

3 个答案: