HTML5+CSS3网页美化与布局单元3 网页图片与背景的美化与布局

单元3网页图片与背景的美化与布局在网页中恰当地使用图像，能够充分展现网页的主题，吸引浏览者的眼球。

图像能美化网页、增强视觉效果，使网页锦上添花。

将适当的图像与文字有效地组合，实现图文混排，丰富页面内容，提高网页的美感。

【知识预览】1．HTML5中常用的图片标签（1）<img>标签<img>标签用于向网页中嵌入一幅图像。

<img>标签创建的是被引用图像的占位空间。

<img> 标签有两个必需的属性：src属性和alt属性。

（2）<figure>标签和<figcaption>标签<figure>标签表示一段独立的流内容（图像、图表、照片、代码等），一般表示文档主体流内容中的一个独立单元，figure元素的内容应该与主内容相关。

<figcaption>标签用于定义<figure>元素的标题，“figcaption”元素应该被置于“figure”元素的第一个或最后一个子元素的位置。

2．CSS的背景设置与定位（1）背景色的设置CSS允许应用纯色作为背景，可以使用background-color属性为元素设置背景色，这个属性接受任何合法的颜色值。

background-color属性用于设置元素的背景颜色，其取值为指定的颜色或transparent，默认值为transparent，即为透明色。

可以为网页中的任何元素设置背景颜色，也可以为HTML的标签设置背景颜色。

（2）背景图像的设置在CSS3之前，背景图片的尺寸是由图片的实际尺寸决定的。

在CSS3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。

可以以像素或百分比规定尺寸，如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

①background-imagebackground-image属性用于定义对象的背景图像，当背景图像与背景颜色（background-color）同时被定义时，背景图像覆盖于背景颜色之上。

其取值可以为none （无背景图像）或者为图像地址，可以使用绝对或相对地址指定背景图像。

②background-sizebackground-size属性用于定义背景图像的尺寸，其属性值可以为数值或者auto，也可以是percentage、cover和contain。

如果属性值为数值或者auto，用于设置背景图像的高度和宽度，第1个值设置背景图的宽度，第2个值设置背景图的高度，其单位可以为像素（px）或者百分比（%），如果只设置1个值，则第2个值会被设置为"auto"。

如果属性值为percentage，则width和height是针对于背景区域，不是背景图像大小。

以父元素的百分比来设置背景图像的宽度和高度，同样第1个值设置宽度，第2个值设置高度。

如果只设置1个值，则第2个值会被设置为"auto"。

HTML5+CSS3网页美化与布局如果属性值为cover，则把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

如果属性值为contain，则把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

③background-positionbackground-position属性用于定义对象背景图像的位置，应先定义对象的background-image属性，该属性不受对象的填充属性padding的影响。

默认值为0%，即背景图像默认位于对象内容区块的左上角。

如果只指定了一个值，该值将用于横坐标，纵坐标默认为50%。

如果指定了两个值，第一个值用于横坐标，第二个值用于纵坐标。

背景图像的位置由background-position-x和background-position-y两个属性综合确定。

background-position-x定位背景图像的横坐标位置，默认值为0%，其取值包括left、center、right和数值。

background-position-y定位背景图像的纵坐标位置，默认值为0%，其取值包括top、center、bottom和数值。

当背景图像的位置坐标定义为数值时，单位可以取长度单位，也可以为百分比。

④background-repeatbackground-repeat属性用于定义对象的背景图像是否重复以及如何平铺，应先定义对象的background-image属性。

其取值包括repeat（重复，即背景图像在纵向和横向上都平铺）、no-repeat（不重复）、repeat-x（横向平铺）和repeat-y（纵向平铺）。

⑤background-originbackground-origin属性用于规定背景图片的定位区域，背景图片可以放置于content-box、padding-box或border-box区域，示意图如图3-2所示。

图3-2背景图片放置位置的示意图⑥background-attachmentbackground-attachment属性用于定义背景图像是否随对象内容滚动还是固定位置。

其取值包括scroll（背景图像随对象内容滚动）和fixed（背景图像处在固定位置），默认值是scroll，也就是说，在默认的情况下，背景会随文档滚动。

⑦backgroundbackground属性是一个复合属性，可以快速定义背景图像，其组成包括background-color、background-image、background-position、background-repeat和background-attachment，默认值为transparent none repeat scroll 0%，如果其单个属性没有显式定义，则取其默认值。

3．背景定位的方法（1）应用位置关键字图像放置关键字最容易理解，其作用如其名称所表明的。

（2）应用百分数值百分数值的表现方式更为复杂。

假设希望用百分数值将图像在其元素中居中。

（3）应用长度值单元3网页图片与背景的美化与布局长度值解释的是元素内边距距左上角的偏移，偏移点是图像的左上角。

例如，如果设置值为50px 100px，图像的左上角将在元素内边距距左上角向右偏移50像素、向下偏移100像素的位置上。

4．图像的透明度通过CSS创建透明图像是很容易的，定义透明效果的CSS3属性是opacity。

CSS的opacity属性是W3C CSS推荐标准的一部分。

（1）创建透明图像创建透明图像的CSS代码如下：img {opacity:0.4;filter:alpha(opacity=40); /* 针对IE8以及更早的版本*/}（2）创建透明图像的Hover效果将鼠标指针移动到图片上时，会改变图片的透明度，实现图像透明度的Hover效果。

创建透明图像的Hover效果的CSS代码如下：img {opacity:0.4;filter:alpha(opacity=40); /* 针对IE8以及更早的版本*/}img:hover {opacity:1.0;filter:alpha(opacity=100); /* 针对IE8以及更早的版本*/}【验证训练】【任务3-1】验证各种类型的图片与背景属性设置【任务描述】在网页中输入以下HTML标签及文字：<div><img src="images/t01.jpg" alt="九赛沟美景" /></div>针对上述图片验证各种类型的图片属性设置，并设置背景图像。

（1）设置多种不同的图片长度和宽度。

（2）设置多种不同的图片边框。

（3）设置div区域的背景图象，并设置背景图像多种不同的background-repeat、background-size、background-position、background-origin属性值以及margin和padding属性值。

【任务实施】（1）创建一个名称为“单元3”的站点，在该站点中创建文件夹“3-1”。

（2）在该站点的文件夹“3-1”中创建网页0301.html。

（3）在网页0301.html中插入div标签和所需的图片，并设置该图片的alt属性。

HTML5+CSS3网页美化与布局（4）定义<img>标签的CSS代码。

<img>标签的初始CSS定义代码如下所示。

img{width:300px;height:220px;border: 2px #CCC solid;border-radius: 4px;}（5）定义<div>标签的CSS代码。

<div>标签的初始定义代码如下所示。

div{background-image:url(images/travel-bg.png);background-repeat:no-repeat;background-size:100% 100%;background-origin:padding-box;padding:20px;margin:10px;}（6）浏览网页0301.html的效果，如图3-3所示。

图3-3 网页0301.html的浏览效果（7）然后按照任务描述的要求不断改变各个属性设置，重新浏览其效果。

【引导训练】【任务3-2】创建图片为主体的网页0302.html【任务描述】创建网页文档0302.html，在该网页中添加必要的HTML标签、插入图片和输入文字。

该网页的浏览效果如图3-4所示，该网页包含1张覆盖整个网页的图片，在该图片上还有文字。

单元3网页图片与背景的美化与布局图3-4 网页0302.html的浏览效果【任务实施】（1）在站点“单元3”中创建文件夹“3-2”。

（2）在文件夹“3-2”中创建网页文档0302.html，切换到【代码视图】，在标签“</head>”的前面编写样式代码，如表3-1所示。

（3）在网页文档0302.html中添加所需的标签、插入图片与输入文字，HTML代码如表3-2所示。

（7）保存网页文档0302.html，在浏览器Google Chrome中的浏览效果如图3-4所示。

【任务3-3】创建多张图片并行排列的网页0303.html【任务描述】（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。

（2）创建网页文档0303.html，且链接外部样式文件base.css和main.css。

（3）在网页0303.html中添加必要的HTML标签和输入文字。

（4）浏览网页0303.html的效果，如图3-5所示，该网页包含多张图片。