Sayfanın arka planında bir html5 tuval öğesi var mı?

Bir web sayfasının arka planında tam ekran tuval öğesi ve önündeki bir tablo gibi "normal" biçimlendirme öğeleri olması mümkün mü? (Alternatif içerikli olarak kullanılamaz olmaz ise) şu pasajı gibiSayfanın arka planında bir html5 tuval öğesi var mı?

<canvas id="imageView" width="100%" height="100%"> 
    <table>...</table> 
</canvas>

kaynak

2010-04-27 user306708

Bunu sahiptir tuval üzerine CSS stilini ayarlamayı deneyebilirsiniz bir position: fixed (veya absolute olarak uygun), ve daha sonra 'un izlediği herhangi bir içerik (örneğinizde verdiğiniz gibi kap içeriği yerine) bunun üzerine oturmalıdır.

kaynak

2010-04-27 08:19:55

çalıştı style = için "konumuna: Sabit; top: 0; left: 0" ve gayet güzel çalışıyor. teşekkürler! – user306708

sadece z-endeksinin ayarlandığını keşfetti: -1; tuvali diğer unsurların arkasına koymak için gereklidir. – user306708

+13

@ fx42: 'z-index: -1' ayarlamayın, bazı tarayıcılarla uğraşır. Bunun yerine, öğelerinizin geri kalanını bir div içine sarın ve bu div üzerinde 'z-index: 1 'ayarlayın. –

Aşağıdaki kodla sizin için denedim. Divan, Matthew öğesinin tarif ettiği gibi tuval elemanının üstüne yerleştirilir. Yani çalışması gerekir Eğer

<!DOCTYPE HTML> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Canvas demo</title> 
<style type="text/css"> 
    #canvasSection{ position:fixed;} 
</style> 
<script type="text/javascript"> 
function draw() 
{ 

//paint the text 
var canvas = document.getElementById('canvasSection'); 
var context = canvas.getContext('2d'); 

context.fillStyle = '#00f'; 
context.font   = 'italic 30px sans-serif'; 
context.textBaseline = 'top'; 
context.font   = 'bold 30px sans-serif'; 
context.strokeText('Your Text!!', 0, 0); 

//paint the square 

var canvasSquare = document.getElementById('canvasSquare'); 
var ctxSquare = canvas.getContext('2d'); 

ctxSquare.fillStyle='#FF0000'; 
ctxSquare.fillRect(0, 100,50,100); 
} 
</script> 
</head> 
<body onLoad="draw()"> 
<canvas id="canvasSection">Error, canvas is not supported</canvas> 
<div>TestText</div> 
</body> 
</html>

kaynak

2010-04-27 08:33:47 Rob

Kod örneği için teşekkür ederiz. – mihsathe

<html> 

    <style> 
    body{ 
     margin:0; 
     padding:0; 
    } 
    canvas{ 
     position:absolute; 
     left:0; 
     top:0; 
     z-index:-1; 
    } 
    div{ 
     position:absolute; 
     z-index:0; 
     left:12px; 
     top:10px; 
    } 
    </style> 
    <body> 

    <canvas id="myCanvas" width="600" height="600" style="border:1px solid #c3c3c3;"> 
     Your browser does not support the canvas element. 
    </canvas> 
    <div>hello is floating div</div> 

    <script type="text/javascript"> 
     var c=document.getElementById("myCanvas"); 
     var ctx=c.getContext("2d"); 
     var grd=ctx.createLinearGradient(0,0,600,600); 
     grd.addColorStop(0,"#FF0000"); 
     grd.addColorStop(1,"#00FF00"); 
     ctx.fillStyle=grd; 
     ctx.fillRect(0,0,600,600); 
    </script> 

    </body> 
</html>

kaynak

2012-05-30 04:18:40

Firstyl, tuval çizimi için j'ye ihtiyaç duyar. ancak cSS kullanarak arka plan olarak bir tuval öğesi elde edebilirsiniz. Bu betiği dene. ve ihtiyaç duyabiliyor :) –

Sayfanın arka planında bir html5 tuval öğesi var mı?

cevap

İlgili konular