2.3 使用CSS背景
HTML5游戏运行在Web浏览器中,因此除了游戏运行的背景(例如Snail Bait游戏的砖红色背景)外,还需考虑网页的背景。
图2.17显示了Snail Bait游戏的网页背景,是使用CSS过渡绘制的。CSS背景不涉及图像的操作开销,并且CSS背景在水平和垂直方向上的无限重复很容易实现,这样无论窗口大小如何,背景看起来总是一样的。
图2.17 Snail Bait游戏的网页背景
图2.17所示网页背景的CSS代码列在了程序清单2.2中。它使用了重复的线性过渡,创造出菱形花纹的效果。这段代码拷贝自CSS3 Patterns Gallery网站,网站主页如图2.18所示。
图2.18 The CSS3 Patterns Gallery网站主页
程序清单2.2 Snail Bait游戏的背景CSS代码(摘自snailbait.css)
CSS3 Patterns Gallery通过让你自己选择复制CSS代码来创作网页上的显示背景。你需要做的仅仅是点击你想要的背景,随后复制CSS代码,并将它们放在你自己的CSS代码中就可以了。
图2.19 Snail Bait游戏的小图标
时间: 2024-10-27 03:14:01