Css 如何创建一个100%宽的动画画布，其上有100%大小的内容？

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

在此“画布”上，应放置100%内容部分

我之所以问这个问题，是因为我可以通过使用

div

s和绝对定位来实现类似的功能。但是当

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

出现在

canvas

上，而

clousx

等元素由javascript移动，但它们位于

cont

后面

---

如何做到这一点？

我不知道我是否正确，但你可以按照你想要的方式来做。这是宽度的组合：100%和

位置：绝对

演示


演示使用带有CSS3
rgba
-值的后台属性进行演示

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>


内容在这里