|
第二十二节 背景图片
本节内容
一、背景图片
二、设置背景颜色
三、设置背景图片
四、背景图片平铺
五、背景图片定位实例1
六、背景图片定位实例2
提示：此“内容提要”有“链接”，可点击查看。
在制作网页时，常常会应用到背景图片。但是，有许多朋友不了解背景图片的设置方法，从而使制作出来的网页效果不太理想。
本节《教程》，专题讲解一下背景图片的设置方法。
首先，应该弄清楚，什么是背景图片？
要弄清楚背景图片，先来说说“背景”。
什么是“背景”呢？“背景”是针对“前景”而言的。
举个例子来说吧。比如：你在桌子上放了一张红色的纸，然后，在纸上又放了一个茶杯。这张红色的纸就是背景，茶杯呢，就是前景。
在制作网页的时候，我们常常应用这种方法。给网页内容，设置一个背景，来衬托网页内容，使我们制作的网页更加漂亮，更加美观。
说到背景与前景，也就涉及到另一个概念，就是“层”。
像说明所举的例子，红色的纸，是先放到桌子上的，它就是第一层，而茶杯呢？是后放到桌子是的，它就是第二层。
像前面我们讲解过的多重表格，你设置的第一套表格标签，它就是第一层。在第一层表格的单元格中放入的第二套表格标签，它就是第二层。在第二层表格的单元格中放入的第三套表格标签，它就是第三层。……
第一层在最下面，或者说在最深处；再往上面就是第二层、第三层……越在下面的层，越在深处；越在上面的层，越在浅处。最上面的层，就是前景，在前景下面（或者是深处）的层，都是背景。
背景可以设置为颜色，也可以设置为图片。
1、用html代码设置：
表达方式举例：bgColor="#00f200"
用html代码设置背景颜色，一般用于表格标签。用于其它标签中，好多的浏览器不支持。
2、用css样式设置：
表达方式举例：style="BACKGROUND-COLOR: #888888”或者style="BACKGROUND-COLOR: rgb(0,188,0)"
用css样式设置背景颜色，可用于多种标签。例如：段落、块区、文字标签、移动、表格等标签。
1、用html代码设置：
表达方式举例：
用html代码设置背景图片，多用于表格标签。用于其它标签中，好多的浏览器不支持。
2、用css样式设置：
用css样式设置背景图片，可用于多种标签。例如：段落、块区、文字标签、移动、表格等标签。
背景图片的平铺，有许多种方法。弄清楚这些方法，在制作网页时，我们就能够根据自己的需要灵活方便地应用了。
（一）水平方向与垂直方向平铺：
上面所举的例子，都是水平方向与垂直方向都平铺的例子。
1、有些网页，我们是需要背景图片水平方向与垂直方向都平铺的。制作这种网页，背景图片的高度与宽度可以不加控制。
2、有些网页，是需要控制背景图片的平铺状况的。例如，我们用风景图片、人物相片作为背景图片，要在背景图片中添加（插入）一些内容的时候。
像这样的背景图片，有三种处理方法。
（1）按照原图片的规格设置背景图片：
按照原图片的规格设置背景图片，背景图片不会被剪切，也不会重复平铺。
举例：
这是我应用css定位样式在一个图片上添加文字的作品。背景图片应用了原图片规格，在图片中我想添加文字的地方添加了文字。
原图片如下：
（2）剪切原图片的一部分：
例如：上面的那个图片，左下角有文字，如果不喜欢，就剪切掉吧。其方法是：把背景图片的高度设置得小一点。
你看看这篇的效果，图片下部的文字剪切掉啦。
同样的道理，只要把背景图片的宽度设置得小一点，图片的右部就能够被剪切掉啦。在这里，我就不再举例啦。
（3）重复平铺原图片：
设置背景图片，可以重复平铺原图片。
如果背景图片的高度大于原图片的高度，背景图片会继续向下平铺；如果背景图片的宽度大于原图片的宽度，背景图片会继续向右平铺。
尽管这种方法也是设置背景图片的一种方法，但是，制作“在背景图片中添加（插入）一些内容”的网页，这种效果是很不理想的一种效果。因此，建议不应用这种方法制作“在背景图片中添加（插入）一些内容”的网页。
（二）只在水平方向平铺：
背景图片可以只在水平方向平铺。
表达方式举例：
style="BACKGROUND-REPEAT: repeat-x; BACKGROUND-POSITION: 0% 0%; HEIGHT: 106px"
应用举例：
这是我制作的一篇网页。背景图片可以只在水平方向平铺，下面粘贴了欢迎新群友加入代码学习群的《公告》。
（三）只在垂直方向平铺：
表达方式举例：
style="BACKGROUND-REPEAT: repeat-y; BACKGROUND-POSITION: 0% 0%; HEIGHT: 106px"
应用举例：
这是我制作的一篇网页。背景图片可以只在垂直方向平铺，右面粘贴了欢迎新群友加入代码学习群的《公告》。
（四）背景图片不平铺：
背景图片不平铺，就是背景图片只显示一次。
表达方式举例：
style="BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: 50% 5%; HEIGHT: 200px"
应用举例：
这是我制作的一篇网页。背景图片不平铺，只显示了一次。在背景图片的下面粘贴了欢迎新群友加入代码学习群的《公告》。
大家已经看到了，上面的几处“表达方式”中，都用到了：BACKGROUND-REPEAT属性。
BACKGROUND-REPEAT属性，是规定如何设置背景图片的。
BACKGROUND-REPEAT属性的属值为：repeat时，背景图片在水平方向与垂直方向都平铺。这是默认值，可以缺省。
BACKGROUND-REPEAT属性的属值为：repeat-x时，背景图片只在水平方向平铺。
BACKGROUND-REPEAT属性的属值为：repeat-y时，背景图片只在垂直方向平铺。
BACKGROUND-REPEAT属性的属值为：no-repeat时，背景图片不平铺，也就是只显示一次。
上面“表达方式”中的BACKGROUND-POSITION属性，是设置背景图片的起始位置的。它的属值，也就是后面的两个百分数，第一个是水平方向的起始点，第二个是垂直方向的起始点。
最后面的高度，是背景图片的高度，单位是px。
上面是我制作的一篇网页。“天安门花坛试灯迎国庆”的照片在8个移动小屏幕中无缝衔接，源源不断地移动着，非常壮观。
这种类型的网页，是比较精细的网页。网页的整体布局以及每个细节，都要做到心中有数。制作要点如下：
1、表格标签中要设置css的相对定位样式，移动屏幕中要设置css的绝对定位样式，移动屏幕控制的表格，要设置背景图片的插入点。
2、这片网页，我设置了8个移动小屏幕。移动小屏幕的高度为600px（即：背景图片的高度），宽度为100px，每两个移动小屏幕之间间隔20px。8个移动小屏幕与7个间隔区域合起来的宽度为940px，因此，总表格的宽度设置为940px。
3、每个移动小屏幕的“居上值”为3px，是因为表格标签中设置了宽度为3px的边框线。8个移动小屏幕的“居左值”，从左到右依次为：2px，122px，242px，362px，482px，602px，722px，842px。
4、每个移动小屏幕控制的“表格”，设置了背景图片，设置了背景图片的插入点，设置了高度与宽度。表格的高度，也就是表格中背景图片的高度。表格的宽度，可以任意设置。设置为多宽，背景图片就从插入点开始，水平方向平铺多宽。
背景图片定位实例1是八个横向的移动小屏幕，而这篇网页是竖向的五个移动小屏幕。它们的区别在于：前者用的是一行八列的表格，背景图片的插入点，垂直方向不变，水平方向是变化的；后者用的是五行一列的表格，背景图片的插入点，水平方向不变，垂直方向是变化的。其它的设置方法，基本上是相同的。
综上所述，本节教程讲解了背景颜色与背景图片的概念，背景颜色与背景图片的表达方式，背景图片的剪切与重复，背景图片平铺的几种形式，背景图片的定位插入点等内容。用我制作的几篇网页，具体说明了背景图片的设置方法。
本篇《教程》也是非常重要的一篇《教程》。学会设置背景图片，你将会制作出许许多多的漂亮网页来。
希望朋友们在学习这篇《教程》上要下点功夫，其中的难点部分，要反复阅读，认真揣摩。重在理解，重在制作，在制作的过程中，加深理解的深度，力求弄懂，力求会用。
作业：
一、填空：
1、“背景”是针对（）而言的。“背景”的作用是用来（）网页内容，使我们制作的网页更加漂亮，更加美观。
2、用html代码设置背景颜色，表达方式举例：（），用html代码设置背景颜色，一般用于（）标签。
3、用css样式设置背景颜色，表达方式举例：（），用css样式设置背景颜色，可用于多种标签。例如：（）
4、用html代码设置背景图片，表达方式举例：（）。
5、用css样式设置背景图片，表达方式举例：（）。
6、背景图片的平铺有四种形式：（）、（）、（）、（）。
7、设置背景图片：如果背景图片的高度小于原图片的高度，背景图片会被剪切（）部；如果背景图片的宽度小于原图片的高度，背景图片会被剪切（）部。
8、设置背景图片：如果背景图片的高度大于原图片的高度，背景图片会在（）部重复平铺；如果背景图片的宽度大于原图片的宽度，背景图片会在（）部重复平铺。
9、BACKGROUND-REPEAT属性，是规定（）背景图片的。属值为：repeat时，背景图片在（）平铺。这是（）值，可以（）。属值为：repeat-x时，背景图片只在（）平铺。属值为：repeat-y时，背景图片只在（）平铺。属值为：no-repeat时，背景图片（）平铺，也就是只（）。
二、认真观察“背景图片定位实例1”与“背景图片定位实例2”的显示效果。查看其代码，体会我讲解的“制作要点”。
“春天没来”编撰
2014年7月1日于北京
|
