堆疊畫布刪除默認的透明度HTML

我有這個網站：堆疊畫布刪除默認的透明度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%; 
}

當兩個畫布是絕對定位和堆疊，容器變白。

當我刪除絕對定位時，一切正常，它們都變成了正確的顏色，背景爲紅色，畫布透明，正如他們應該的那樣。

那麼我該如何製作兩個畫布堆疊並使它們都保持透明？

來源

2013-04-01 JoshWillik

你的容器正在崩潰，並帶上你的油畫！

確保至少在容器對象中定義寬度和高度。

此代碼在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-01 18:22:40 markE

哦，這就是發生了什麼事。謝謝：） – JoshWillik

由於坊間非常有用的答案，我發現與我的設計發生了什麼事情錯了。

鑑於此，我發現了另一種使用CSS3處理它的方法。

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

這將使所有的畫布很好地排列在彼此之上，如果他們都是相同的大小。我不確定這個瀏覽器的兼容性。

來源

2013-04-02 00:14:57 JoshWillik

堆疊畫布刪除默認的透明度HTML

回答

相關問題