高职高专计算机任务驱动模式教材HTML5+CSS3跨平台网页设计实例教程

单元3网页中图像与背景的应用设计 (接正文是42mm)图像是网页中的主要元素之一,图像不但能美化网页,而且能够更直观地表达信息。在页面中恰到好处地使用图像,能使网页更加生动、形象和美观。 【知识**】〖*2〗1. HTML5中常用的图片标签HTML5的图像标签如表31所示。表31HTML5的图像标签标签名称标 签 描 述标签名称标 签 描 述定义图像定义figure元素的标题定义图像映射定义媒介内容的分组,以及它们的标题定义图像地图内部的区域1) 标签 标签用于向网页中嵌入一幅图像。从技术上讲,标签并不会在网页中插入图像,而是从网页上链接图像。标签创建的是被引用图像的占位空间。标签有两个必需的属性: src属性和alt属性。 2) 标签和标签 标签表示一段独立的流内容(图像、图表、照片、代码等),一般表示文档主体流内容中的一个独立单元,figure元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。使用figcaption元素可以为figure元素组添加标题。向文档中插入带有标题图像的示例代码如下: 九寨沟风光 其浏览效果如图31所示。 图31带标题的图片浏览效果 标签用于定义元素的标题,figcaption元素应该被置于figure元素的**个或*后一个子元素的位置。 2. CSS的背景设置与定位 1) 背景色的设置 CSS允许应用纯色作为背景,可以使用backgroundcolor属性为元素设置背景色,这个属性接受任何合法的颜色值。backgroundcolor属性用于设置元素的背景颜色,其取值为指定的颜色或transparent(默认值即透明色)。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其父元素的背景才能可见。一般都不采用这种方法进行设置,如果某个元素的父元素被设置了背景色,那么该元素就可以使用这种形式恢复成透明色的效果。 HTML5+CSS3跨平台网页设计实例教程单元3网页中图像与背景的应用设计定义背景颜色的示例代码如下: .main { background-color: #fff;} p {background-color: gray;}如果希望背景色从元素中的文本向外少有延伸,只需增加一些内边距即可。p {background-color: gray; padding: 20px;}可以为网页中的任何元素设置背景颜色,也可以为HTML的标签设置背景颜色。 2) 背景图像的设置 在CSS3之前,背景图片的尺寸是由图片的实际尺寸决定的。在CSS3中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。可以以像素或百分比规定尺寸,如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。 背景图像可以作为修饰要素在网页布局与排版中使用,CSS为了实现网页背景图像广泛应用,提供了大量的属性,且得到了各大浏览器的广泛支持,综合利用这些属性可以提高网页布局和排版的灵活性和适应能力。 CSS也允许使用背景图像创建相当复杂的效果,要把图像放入背景,需要使用backgroundimage属性,该属性的默认值是none,表示背景上没有放置任何图像。如果需要设置一个背景图像,必须为这个属性设置一个URL值,示例代码如下: body {background-image: url(bg_01.gif);}大多数背景都应用到body元素,不过并不仅限于此。下面的示例代码为一个段落应用了一个背景,而不会对文档的其他部分应用背景。p.flower {background-image: url(bg_02.gif);}甚至可以为行内元素设置背景图像,下面的示例代码为一个链接设置了背景图像。a.radio {background-image: url(bg_03.gif);}backgroundimage也不能继承,事实上,所有背景属性都不能继承。 (1) backgroundimage。backgroundimage属性用于定义对象的背景图像,当背景图像与背景颜色(backgroundcolor)同时被定义时,背景图像覆盖于背景颜色之上。其取值可以为none(无背景图像)或者为图像地址,可以使用绝对或相对地址指定背景图像。 (2) backgroundsize。backgroundsize属性用于定义背景图像的尺寸,其属性值可以为数值或者auto,也可以是percentage、cover和contain。示例代码如下:background-size: 200px; background-size: 200px 100px; background-size: auto 200px; background-size: 50% 25%; background-size: contain; background-size: cover;如果属性值为数值或者auto,用于设置背景图像的高度和宽度,第1个值设置背景图的宽度,第2个值设置背景图的高度,其单位可以为像素(px)或者百分比(%),如果只设置1个值,则第2个值会被设置为auto。 如果属性值为percentage,则width和height是针对背景区域,不是背景图像大小。以父元素的百分比来设置背景图像的宽度和高度,同样第1个值设置宽度,第2个值设置高度。如果只设置1个值,则第2个值会被设置为auto。 如果属性值为cover,则把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 如果属性值为contain,则把背景图像扩展至*大尺寸,以使其宽度和高度完全适应内容区域。 (3) 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和数值。当背景图像的位置坐标定义为数值时,单位可以取长度单位,也可以为百分比。 下面的示例代码在body元素中将一个背景图像居中放置。body { background-image:url('bg_03.gif'); background-repeat:no-repeat; background-position:center; }(4) backgroundrepeat。backgroundrepeat属性用于定义对象的背景图像是否重复以及如何平铺,应先定义对象的backgroundimage属性。其取值包括repeat(重复,即背景图像在纵向和横向上都平铺)、norepeat(不重复)、repeatx(横向平铺)和repeaty(纵向平铺)。 如果需要在页面上对背景图像进行平铺,可以使用backgroundrepeat属性。属性值repeat导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeatx和repeaty分别导致图像只在水平或垂直方向上重复,norepeat则不允许图像在任何方向上平铺。背景图像默认将从一个元素的左上角开始,示例代码如下: body { background-image: url(bg_03.gif); background-repeat: repeat-y; }网页设计时,经常使用横向重复属性使一些小图片形成大的背景图像,主要应用于导航栏、标题栏以及按钮等。 (5) backgroundorigin。backgroundorigin属性用于规定背景图片的定位区域,背景图片可以放置于contentbox、paddingbox或borderbox区域,示意图如图32所示。 图32背景图片放置位置的示意图 在contentbox中定位背景图片的示例代码如下: div { background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; background-origin:content-box; }(6) backgroundattachment。backgroundattachment属性用于定义背景图像是否随对象内容滚动还是固定位置。其取值包括scroll(背景图像随对象内容滚动)和fixed(背景图像处在固定位置),默认值是scroll,也就是说在默认的情况下,背景会随文档滚动。 如果文档比较长,那么当文档向下滚动时背景图像也会随之滚动,当文档滚动到超过图像的位置时图像就会消失。可以通过backgroundattachment属性防止这种滚动,通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响。 对于背景图像固定的页面,浏览网页时可以看到页面滚动时背景仍保持固定,网页中的内容可以浮动在背景图像的不同位置。背景图像固定一般用于整个网页的背景设置,即设置body标签的背景属性,示例代码如下:body { background-attachment: fixed; background-image: url(../images/bg0301. jpg); background-repeat: repeat-y; }(7) background。background属性是一个复合属性,可以快速定义背景图像,其组成包括backgroundcolor、backgroundimage、backgroundposition、backgroundrepeat和backgroundattachment,默认值为transparent none repeat scroll 0,如果其单个属性没有显式定义,则取其默认值,示例代码如下:background: #c63 url(images/0303bg01.gif) repeat-x left top fixed;该属性不可继承,如果未指定,其父元素的背景颜色和背景图像将在元素下面显示。 3. 背景定位的方法 1) 应用位置关键字 图像放置关键字*容易理解,其作用如其名称所表明的。例如,top right使图像放置在元素内边距区的右上角。根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字(一个对应水平方向,另一个对应垂直方向)。如果只出现一个关键字,则认为另一个关键字是center。所以,如果希望每个段落的中部上方出现一个图像,只需声明如下所示的代码。p { background-image:url('bgimg.gif'); background-repeat:no-repeat; background-position:top; }2) 应用百分数值 百分数值的表现方式更为复杂。假设希望用百分数值将图像在其元素中居中,这很容易,示例代码如下: