(8)HTML5-图片

在图片单元中，我们重点介绍的是如何改变游戏的前景与背景，以及CSS中一个重要的“盒子模式（box model）”布局概念。

前景与背景

前景属性通常应用于指定的文字显示的颜色，而背景属性可以决定游戏图片或颜色要以何种方式布局在游戏画面的最底层。

Color（前景色）

background-color（背景色）

background-image（背景图案）

background-repeat（背景图案重复）

background-attachment（背景图案滚动）

background-position（背景图案位置）

=======================================================================================================

{color}

属性color用于指定元素前景色。颜色的表示一共有三种，分别是：

16进制：每码范围从0-9，以及A-F，例如“#FFF000”

RGB值：RGB3码表示，范围介于0-255。例如RGB（255，0，0）

颜色名称：例如“red”

CSS文件

.font1{color:#ff0000;}.font2{color:rgb(255,0,0);}

{background-color}

属性background-color可以通过上色的方式指定元素背景色。

CSS文件

body{background-color:#ff0000;}p{background-color:green;}

{background-image}

属性background-image可以通过加入图像文件的方式指定元素的背景。

CSS文件

body{background-image:url("ball.png");}//若是图片格式小于背景，那么系统自动重复填满背景

{background-repeat}

针对background-image属性，如果我们不想使用重复填满效果，可以加入属性background-repeat来指定背景图案重复方式，包括不重复（no-repeat），在x轴重复（repeat-x），在y轴重复（repeal-y）。

CSS文件

body{background-image:url("ball.png");background-repeat:no-repeat}

{background-attachment}

属性background-attachment可以决定当画面滚动时，背景图案要跟着画面滚动（scroll）或不跟着画面滚动（fixed）。

CSS文件

body{background-image:url("ball.png");background-repeat:no-repeat;background-attachment:fixed;}

{background-position}

属性background-position可以指定图案作为背景所在的位置，通过此属性可以精确定位背景图案的位置，共有三种方法。

文字：选择对齐x轴与y轴的“left”，“right”和“center”；

CSS文件

body{background-image:url("ball.png");background-repeat:no-repeat;background-position:center center;}

百分比：选择放置x轴与y轴的比例位置。

CSS文件

body{background-image:url("ball.png");background-repeat:no-repeat;background-position：50% 50%；}

坐标：选择对齐x轴与y轴的坐标位置。

body{background-image:url("ball.png");background-repeat:no-repeat;background-position：640px 360px；}

{background}

属性background则是上述所有与背景有关的属性的缩写用法。可以用一行指令代表所有对background的设置，安排属性时应该按照《background-color》,<background-image>,<background-repeat>,<background-attachment>,<background-position>的顺序排列，属性与属性之间保持空格，若不需要设置的属性则可以直接忽略不写。

CSS文件

body{background:url("ball.png") no-repeat center center;}

盒子模式

过去要在网页上布局元素是采用“表格”排版的方式，通过设置不同的大小的表格，边框，以表格作为网页排版的定位基准。但是改用CSS排版后，这些大小不同的表格全部置换为“盒子（box）”，在画面中摆入不同大小的盒子作为图文内容的表达框架。使用CSS的盒子来排版画面，具备程序代码简洁，兼容更多浏览器等优点，使盒子模式成为CSS中一个重要的必学概念。

盒子模式被用来描述一个显示图文的表达框架，为了能够更好的操控框架属性，又可将一个盒子细分为边界（margin），边框（border），留白（padding）和内容（content）等四个部分，由于其一层一层的包覆方式，得到“盒子模式”这个名称。

{Margin}

属性Margin在边框之外，也是盒子最外层的属性，主要决定盒子与周围其它元素的距离。由于盒子共有四个边，所以可以分别决定上，下，左，右的距离，设置属性为：

margin-top（上边界）

margin-right（右边界）

margin-bottom（下边界）

margin-left（左边界）

我们可以通过三种方式来设置边界，分别是像素，百分比和“auto”。

CSS文件

.font1{margin-top:10px;margin-left:10%;margin-right:10px;margin-bottom:auto;border:1px solid 000000}

也可以使用缩写的方式，一次指定四个边的距离，但是设置时一定要遵循上右下左的顺时针依次提供值。

CSS文件

.font2{margin:10px 10px auto 10%;border:1px solid 000000}

{border}

属性border可以控制盒子的边界显示效果，例如边框样式，宽度，颜色等等。常见属性有：

border-style：style可以决定外框的样式，例如实线（solid），虚线（dashed），双线（double），点线（dotted），凹线（groove），凸线（ridge），嵌入线（inset），浮出线（outset）。

border-width：可以决定外框的粗细，可用数字（px）表示，或是用文字thin（薄），medium（中等）与thick（厚）来表示。

border-color：可以决定外框的颜色，可以通过16进制数，RGB编码和文字来设置。

border-top-，border-right-，border-bottom-，border-left-：在上述属性前加入这些前导字，可以分别设置上下左右边框的外观。

CSS文件

.font1{border-style:double;border-width:6px;border-color:red;border-top-color:green;}

border:使用属性border可以将多行border设置缩减成一行，但仅限于四个边都用相同的设置时使用。

CSS文件

.font2{border:double red 6px;}

{padding}

属性padding可以控制内容与边框之间的距离，也就是内容四周的留白部分，因此同样上下左右四边可以设置，设置单位可以使用长度（px），百分比（%）和"auto".

padding-top（上）

padding-right（右）

padding-bottom（下）

padding-left（左）

CSS文件

.font1{padding-top:10px;padding-right:10%;padding-bottom:10px;padding-left:10%;border: 1px solid 000000;}

也可以使用缩写的方式，一次指定四个边的距离，但是设置时一定要注意遵循上，右，下，左的顺时针依次提供数值。

CSS文件

.font2{padding:10px 10px 10% 10%;border:1px solid 000000;}