在<canvas>上顯示<div>
[英]Displaying a <div> over a <canvas>
問題描述
Firefox和Chrome中存在的問題是我有一個帶有純色背景的畫布，以及一個帶有純色背景顏色/圖像的div。 div被限制在畫布頂部。 div不會顯示在畫布上。 一個有趣的注意事項是，如果div中有文本，它將正確顯示。 這意味着它是兩個瀏覽器中的瀏覽器錯誤。 以下是一些想要嘗試的人的代碼。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#d{background-color:#111;margin-top:-150px;z-index:999999;}
</style>
<script type="text/javascript">
function load() {
var c = document.getElementById("c").getContext("2d");
c.fillStyle = "rgba(255, 200, 200, 1)";
c.fillRect(0, 0, c.canvas.width, c.canvas.height);
}
</script>
</head>
<body onload="load()">
<canvas id="c" width="500" height="300"></canvas>
<div id="d" style="width:500px;height:300px"></div>
</body>
</html>
那么，有人有任何變通方法嗎？ 或者我在HTML5規范中遺漏了哪些內容，說這是正確的？
請注意，請不要問我為什么要使用邊距而不是固定/絕對/等等替代品。 我需要利潤。
5 個解決方案
解決方案1
18 2010-10-20 17:59:31
這只能通過應用樣式來修復：
#d {position:relative;}
要么
#d {position:absolute;}
解決方案2
2 2011-09-20 15:46:22
這最近發生在我身上，而不是改變它的布局方式，我從div切換到使用帶display:inline-block的span display:inline-block 。
適用於Firefox / Chrome / Safari。 尚未在IE中測試過。
解決方案3
1 2011-09-29 05:36:28
使用以下代碼，希望它可以幫助您：
<head>
<style type="text/css">
#c{background-color:#000;z-index:-1;position: fixed;}
#d{background-color:#aa00aa;margin-top:-50px;z-index:0;}
</style>
<script type="text/javascript">
function load() {
var cntx = document.getElementById("c").getContext("2d");
cntx.fillStyle = "rgba(255, 200, 200, 1)";
cntx.canvas.top = "0";
cntx.canvas.left = "0";
cntx.fillRect(0, 0, cntx.canvas.width, cntx.canvas.height);
var obj = document.getElementById("d");
obj.style.position = "fixed";
obj.style.top = 50;
obj.style.left = 0;
}
</script>
</head>
<body onload="load()">
<canvas id="c" width="500" height="300"></canvas>
<div id="d" style="width:500px;height:300px"></div>
</body>
解決方案4
0 2010-10-20 18:00:34
添加位置：相對; （或絕對）#d似乎適用於chrome和firefox。 如果你問我，不知道為什么。 這對你有好處嗎？
解決方案5
0 2011-09-29 06:08:02
好吧，我已經閱讀了你的問題，我明白你不想使用職位......無論你必須使用職位來讓z-index工作。 position：相對字面意思在這種情況下什么都不做，保存你要求的東西。 這是一個解決方案，雖然它依賴於位置：相對http://jsfiddle.net/jalbertbowdenii/Ar6Sh/
在div上疊加畫布
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.