gpt4 book ai didi

javascript - 使用 作为 CSS 背景

转载 作者:IT王子 更新时间:2023-10-29 02:56:36 28 4
gpt4 key购买 nike

我可以使用 canvas 元素作为 css 背景吗?

最佳答案

自 2008 年以来,这在 WebKit 中成为可能,请参阅 here .

<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 包含一个功能,允许您以这种方式使用任何元素(包括 Canvas )作为 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>

参见 Mozilla hacks具体情况。

关于javascript - 使用 <canvas> 作为 CSS 背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3397334/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com