css - 如何创建一个 100% 宽的动画画布，其上放置 100% 大小的内容？

Question

考虑一个包含背景部分的网页，其中包含我想在其上创建动画的图像（例如 image=sky 和 ​​animation=moving-clouds）。这东西是100%的宽度。

在这个“画布”上，应该放置 100% 的内容部分。

我问这个问题的原因是因为我可以简单地使用divs 和绝对定位来实现这样的事情。div但是当s 有 100% 的宽度时，我不知道如何制作这样的东西！

我可以写这样的东西：

<div id='canvas' style='width:100%;background-image:...'>
  <div id='cloud1' style='...'></div>
  <div id='cloud2' style='...'></div>
  <div id='cloud3' style='...'></div>
</div>
<div id='cont' style='width:100%'>
  my content here
</div>

样式canvas等cont出现cont在 javascript 上canvas，类似的元素clousx由 javascript 移动，但它们存在于cont.

如何做到这一点？

Answer 1

我不知道我说得对不对，但你完全可以按照你想要的方式去做。所以这是width: 100%;和的组合position: absolute;。

演示

先试后买

该演示使用带有 CSS3rgba值的 background-property 进行演示。

CSS

div.outer {
  position: absolute;
  width: 100%;
  height: 100%;
  border:1px solid red;
}

div.text {
  background: rgba(255,255,255,0.5);
}

div.cloud {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 50px;
  width: 50px;
  border: 1px solid red;
}

HTML

<div class="outer">
    <div class="cloud"></div>
</div>

<div class="outer text">
  Content goes here
</div>