堆叠画布删除默认透明度 HTML答案

【问题标题】：Stacking canvases removes default transparency HTML堆叠画布删除默认透明度 HTML
【发布时间】：2013-04-02 08:14:57
【问题描述】：

我有这个 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%;
}

当两个画布绝对定位并堆叠时，容器变为白色。

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

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

【问题讨论】：

标签： css html html5-canvas css-position

【解决方案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>

【讨论】：

哦原来是这样。谢谢你:)

【解决方案2】：

由于 markE 的非常有帮助的回答，我发现了我的设计出了什么问题。

鉴于此，我发现了另一种使用 CSS3 处理它的方法。

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

如果所有画布的大小都相同，这将使所有画布很好地排列在一起。我不确定这个浏览器是否兼容。

【讨论】：