作者简介
内容简介
单元3网页中图像与背景的应用设计
(接正文是42mm)图像是网页中的主要元素之一,图像不但能美化网页,而且能够更直观地表达信息。在页面中恰到好处地使用图像,能使网页更加生动、形象和美观。
【知识必备】〖*2〗1. HTML5中常用的图片标签HTML5的图像标签如表31所示。表31HTML5的图像标签标签名称标 签 描 述标签名称标 签 描 述
其浏览效果如图31所示。
图31带标题的图片浏览效果
标签用于定义元素的标题,figcaption元素应该被置于figure元素的第一个或最后一个子元素的位置。
2. CSS的背景设置与定位
1) 背景色的设置
CSS允许应用纯色作为背景,可以使用backgroundcolor属性为元素设置背景色,这个属性接受任何合法的颜色值。backgroundcolor属性用于设置元素的背景颜色,其取值为指定的颜色或transparent(默认值即透明色)。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其父元素的背景才能可见。一般都不采用这种方法进行设置,如果某个元素的父元素被设置了背景色,那么该元素就可以使用这种形式恢复成透明色的效果。
HTML5+CSS3跨平台网页设计实例教程单元3网页中图像与背景的应用设计定义背景颜色的示例代码如下: .main { background-color: #fff;}
p {background-color: gray;}如果希望背景色从元素中的文本向外少有延伸,只需增加一些内边距即可。p {background-color: gray; padding: 20px;}可以为网页中的任何元素设置背景颜色,也可以为HTML的标签设置背景颜色。
2) 背景图像的设置
在CSS3之前,背景图片的尺寸是由图片的实际尺寸决定的。在CSS3中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。可以以像素或百分比规定尺寸,如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
背景图像可以作为修饰要素在网页布局与排版中使用,CSS为了实现网页背景图像广泛应用,提供了大量的属性,且得到了各大浏览器的广泛支持,综合利用这些属性可以提高网页布局和排版的灵活性和适应能力。
CSS也允许使用背景图像创建相当复杂的效果,要把图像放入背景,需要使用backgroundimage属性,该属性的默认值是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);}backgroundimage也不能继承,事实上,所有背景属性都不能继承。
(1) backgroundimage。backgroundimage属性用于定义对象的背景图像,当背景图像与背景颜色(backgroundcolor)同时被定义时,背景图像覆盖于背景颜色之上。其取值可以为none(无背景图像)或者为图像地址,可以使用绝对或相对地址指定背景图像。
(2) backgroundsize。backgroundsize属性用于定义背景图像的尺寸,其属性值可以为数值或者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。
充分调研HTML5、CSS3新技术的实际应用情况，优选了53个来自于真实网站的典型教学案例，采用“任务驱动、精讲多练、理论实践一体化”的教学方法，改进和优化教学内容的组织方法和网页设计技能的训练方法，全方向促进基于HTML5+CSS3网页应用设计能力的提升。
