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%;
}

当两幅画布完全定位并堆叠时，容器变成白色。

当我删除绝对定位时，一切正常，一切正常，背景为红色，画布透明，应该是这样。

那么如何让两个画布堆叠并让它们都保持透明呢？

4

2 回答 2

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 回答
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 回答