堆叠画布移除默认透明度HTML
堆叠画布移除默认透明度HTML
提问于 2013-04-02 01:28:27
我有这个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
Stack Overflow用户
回答已采纳
发布于 2013-04-02 02:22:40
你的容器正在崩溃，并带走了你的画布！
确保在容器对象中至少定义宽度和高度。
此代码适用于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>Stack Overflow用户
发布于 2013-04-02 08:14:58
由于markE的回答非常有帮助，我发现了我的设计出了什么问题。
有鉴于此，我发现了另一种使用CSS3处理它的方法。
#contain{
position:relative;
background:red;
}
.subcanvs:first-child{
position:static;
}
.subcanvs{
position:absolute;
left:0;
width:100%;
}如果所有画布的大小都相同，这将使所有画布在彼此的顶部排列得很好。在这个问题上，我不确定浏览器的兼容性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15748233
复制相关文章
相似问题
腾讯云开发者
