Question

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

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

当我删除绝对定位时，一切都运行正常，一切都是正确的颜色，背景是红色的，画布是透明的，因为它们应该是。

那么我如何制作两个画布并使它们保持透明？

Answer 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>

Answer 2

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

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

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

如果它们的尺寸相同，这将使所有的画布在彼此之上很好地排列。我不确定这个浏览器的兼容性。

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

2 个答案: