1

私はこのhtmlを持っています:

<section id="contain">
  <canvas id="canvas-1" class="subcanvs"></canvas>
  <canvas id="canvas-2" class="subcanvs"></canvas>
</section>

そしてこのCSS：

#contain{
  position:relative;
  background:red;
}
.subcanvs{
  position:absolute; /*pay attention to this line*/
  width:100%;
}

2 つのキャンバスが完全に配置されてスタックされると、コンテナは白くなります。

絶対配置を削除すると、すべてが正常に機能し、背景が赤になり、キャンバスが透明になる正しい色になります。

では、2 つのキャンバスを重ねて両方とも透明にするにはどうすればよいでしょうか。

4

2 に答える 2

1

markE による非常に役立つ回答のおかげで、自分の設計で何が問題になっているのかを発見できました。

これに照らして、CSS3 を使用して対処する別の方法を発見しました。

#contain{
  position:relative;
  background:red;
}
.subcanvs:first-child{
  position:static;
}
.subcanvs{
  position:absolute;
  left:0;
  width:100%;
}

これにより、すべてのキャンバスが同じサイズである場合、すべてのキャンバスが互いにうまく整列します。これに関するブラウザの互換性はわかりません。

于 2013-04-02T00:14:57.513 に答える
1

コンテナが崩壊し、キャンバスを一緒に持っていきます!

コンテナー オブジェクトでは、少なくとも幅と通常は高さを定義してください。

このコードは、IE、Chrome、および Mozilla で機能します。

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
#contain{
  position:relative;
  background:red;
  border:1px solid blue;
  width:500px;
  height:300px;
}
.subcanvs{
  position:absolute;
  width:100%;
  height:100%;
}
</style>
</head>

<body>
    <section id="contain">
      <canvas id="canvas-1" class="subcanvs"></canvas>
      <canvas id="canvas-2" class="subcanvs"></canvas>
    </section>
</body>
</html>
于 2013-04-01T18:22:40.290 に答える