《HTML5 2D游戏编程核心技术》——第2章，第2.3节使用CSS背景

**本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的第2章，第2.3节，作者［美］　戴维·吉尔里，更多章节内容可以访问云栖社区“华章计算机”公众号查看。
**

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游戏的小图标