CSS3全新的背景图片方案
CSS3全新的背景图片方案
firefox支持指定一个元素的ID将它作为另一个元素的背景-moz-element(#ID)， webkit系支持-webkit-canvas(xxxx)动态创建一个canvas作为它的背景
1.firefox
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h3>firefox4+</h3>
<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
<p>This box uses the element with the #myBackground1 ID as its background!</p>
</div>
<div style="overflow:hidden; height:0;">
<div id="myBackground1" style="width:1024px; height:1024px; background-image: -moz-linear-gradient(left, red, orange, yellow, white);">
<p style="-moz-transform-origin:0 0; -moz-transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
</div>
</div>
<hr/>
<div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
</div>
<div style="overflow:hidden; height:0;">
<button id="myBackground2" type="button">Evil button!</button>
</div>
</body>
</html>
2.webkit,canvas
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
div {
background: -webkit-canvas(test);
float:left;
width: 100px;
height: 100px;
}
</style>
<script>
function onLoad() {
var ctx = document.getCSSCanvasContext("2d", "test", 100, 100);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 90, 90)
}
document.addEventListener("DOMContentLoaded", onLoad);
</script>
</head>
<body>
<div>只能运行于webkit系</div>
</body>
</html>
