1. 首页
  2. 问题
  3. 采用 作为CSS背景
小编典典

采用 作为CSS背景

css

我可以使用canvas元素作为CSS背景吗？


阅读 353

收藏
2020-05-16

共1个答案

小编典典

这在WebKit中已经成。

<html>
 <head>
 <style>
 div { background: -webkit-canvas(squares); width:600px; height:600px; border:2px solid black }
 </style>

 <script type="application/x-javascript">
function draw(w, h) {
 var ctx = document.getCSSCanvasContext("2d", "squares", w, h);

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 55, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 55, 50);
}
 </script>
 </head>
 <body onload="draw(300, 300)">
   <div></div>
 </body>

</html>

当前，Firefox 4包含一项功能，该功能允许您以这种方式将任何元素（包括画布）用作CSS背景：

<p id="myBackground1" style="background: darkorange; color: white;  width: 300px; height: 40px;">
  This element will be used as a background.
</p>
<p style="background: -moz-element(#myBackground1); padding: 20px 10px; font-weight: bold;">
  This box uses #myBackground1 as its background!
</p>
2020-05-16