0

その上にアニメーションを作成したい画像を保持する背景部分で構成される Web ページを考えてみましょう (たとえば、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表示されcanvas、 などの要素clousxは JavaScript によって移動されますが、背後に存在しcontます。

これを達成する方法は？

4

1 に答える 1

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>
于 2013-01-05T16:33:38.130 に答える