штабелирования холсты удаляет HTML по умолчанию прозрачности

У меня есть этот 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

Из-за очень полезный ответ по MARKE, я обнаружил, что происходит не так с моим дизайном.

В свете этого я обнаружил другой способ справиться с ним с помощью 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 по умолчанию прозрачности

ответ

Смежные вопросы