2015年网页美化与布局电子教案03单元3　网页图片与背景的美化与布局.docVIP

HTML5+CSS3网页美化与布局 单元3　网页图片与背景的美化与布局 PAGE 10 PAGE 9 单元3　网页图片与背景的美化与布局 在网页中恰当地使用图像，能够充分展现网页的主题，吸引浏览者的眼球。图像能美化网页、增强视觉效果，使网页锦上添花。将适当的图像与文字有效地组合，实现图文混排，丰富页面内容，提高网页的美感。 【知识预览】 1．HTML5中常用的图片标签 （1）img标签 img标签用于向网页中嵌入一幅图像。img标签创建的是被引用图像的占位空间。img 标签有两个必需的属性： src属性和 alt属性。 （2）figure标签和figcaption标签 figure标签表示一段独立的流内容（图像、图表、照片、代码等），一般表示文档主体流内容中的一个独立单元，figure元素的内容应该与主内容相关。 figcaption标签用于定义figure元素的标题，“figcaption”元素应该被置于“figure”元素的第一个或最后一个子元素的位置。 2．CSS的背景设置与定位 （1）背景色的设置 CSS允许应用纯色作为背景，可以使用 \o CSS background-color 属性 background-color属性为元素设置背景色，这个属性接受任何合法的颜色值。background-color属性用于设置元素的背景颜色，其取值为指定的颜色或transparent，默认值为transparent，即为透明色。 可以为网页中的任何元素设置背景颜色，也可以为HTML的标签设置背景颜色。 （2）背景图像的设置 在CSS3之前，背景图片的尺寸是由图片的实际尺寸决定的。在CSS3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。可以以像素或百分比规定尺寸，如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。 ① background-image background-image属性用于定义对象的背景图像，当背景图像与背景颜色（background-color）同时被定义时，背景图像覆盖于背景颜色之上。其取值可以为none（无背景图像）或者为图像地址，可以使用绝对或相对地址指定背景图像。 ② background-size background-size属性用于定义背景图像的尺寸，其属性值可以为数值或者auto，也可以是percentage、cover和contain。 如果属性值为数值或者auto，用于设置背景图像的高度和宽度，第1个值设置背景图的宽度，第2个值设置背景图的高度，其单位可以为像素（px）或者百分比（%），如果只设置1个值，则第2个值会被设置为auto。 如果属性值为percentage，则width和height是针对于背景区域，不是背景图像大小。以父元素的百分比来设置背景图像的宽度和高度，同样第1个值设置宽度，第2个值设置高度。如果只设置1个值，则第2个值会被设置为auto。 如果属性值为cover，则把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 如果属性值为contain，则把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 ③ background-position background-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-repeat background-repeat属性用于定义对象的背景图像是否重复以及如何平铺，应先定义对象的background-image属性。其取值包括repeat（重复，即背景图像在纵向和横向上都平铺）、no-repeat（不重复）、repeat-x（横向平铺）和repeat-y（纵向平铺）。 ⑤ background-origin background-origin属性用于规定背景图片的定位区域，背景图片可以放置于