欢迎来到天天文库
浏览记录
ID：59387030
大小：4.31 MB
页数：10页
时间：2020-05-31
《2015年网页美化与布局电子教案03单元3 网页图片与背景的美化与布局.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、单元3 网页图片与背景的美化与布局单元3 网页图片与背景的美化与布局在网页中恰当地使用图像，能够充分展现网页的主题，吸引浏览者的眼球。图像能美化网页、增强视觉效果，使网页锦上添花。将适当的图像与文字有效地组合，实现图文混排，丰富页面内容，提高网页的美感。【知识预览】1．HTML5中常用的图片标签（1）标签标签用于向网页中嵌入一幅图像。标签创建的是被引用图像的占位空间。标签有两个必需的属性：src属性和alt属性。（2）标签和标签标签表示一段独立的流内容（图像、图表、照片、代码等），一般表示文档
2、主体流内容中的一个独立单元，figure元素的内容应该与主内容相关。标签用于定义元素的标题，“figcaption”元素应该被置于“figure”元素的第一个或最后一个子元素的位置。2．CSS的背景设置与定位（1）背景色的设置CSS允许应用纯色作为背景，可以使用background-color属性为元素设置背景色，这个属性接受任何合法的颜色值。background-color属性用于设置元素的背景颜色，其取值为指定的颜色或transparent，默认值为transparent，即为透明色。可以为网页中的任何元素设置背景颜色，也可以为HTML的标签设
3、置背景颜色。（2）背景图像的设置在CSS3之前，背景图片的尺寸是由图片的实际尺寸决定的。在CSS3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。可以以像素或百分比规定尺寸，如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。①background-imagebackground-image属性用于定义对象的背景图像，当背景图像与背景颜色（background-color）同时被定义时，背景图像覆盖于背景颜色之上。其取值可以为none（无背景图像）或者为图像地址，可以使用绝对或相对地址指定背景图像。②background-sizebackground-size
4、属性用于定义背景图像的尺寸，其属性值可以为数值或者auto，也可以是percentage、cover和contain。如果属性值为数值或者auto，用于设置背景图像的高度和宽度，第1个值设置背景图的宽度，第2个值设置背景图的高度，其单位可以为像素（px）或者百分比（%），如果只设置1个值，则第2个值会被设置为"auto"。如果属性值为percentage，则width和height是针对于背景区域，不是背景图像大小。以父元素的百分比来设置背景图像的宽度和高度，同样第1个值设置宽度，第2个值设置高度。如果只设置1个值，则第2个值会被设置为"auto"。9单元3 网页图片与背景的美化与布局如
5、果属性值为cover，则把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。如果属性值为contain，则把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。③background-positionbackground-position属性用于定义对象背景图像的位置，应先定义对象的background-image属性，该属性不受对象的填充属性padding的影响。默认值为0%，即背景图像默认位于对象内容区块的左上角。如果只指定了一个值，该值将用于横坐标，纵坐标默认为50%。如果指定了两个值，第一个值用于横坐标，第二个值用于纵坐标。
6、背景图像的位置由background-position-x和background-position-y两个属性综合确定。background-position-x定位背景图像的横坐标位置，默认值为0%，其取值包括left、center、right和数值。background-position-y定位背景图像的纵坐标位置，默认值为0%，其取值包括top、center、bottom和数值。当背景图像的位置坐标定义为数值时，单位可以取长度单位，也可以为百分比。④background-repeatbackground-repeat属性用于定义对象的背景图像是否重复以及如何平铺，应先定义对象的ba
7、ckground-image属性。其取值包括repeat（重复，即背景图像在纵向和横向上都平铺）、no-repeat（不重复）、repeat-x（横向平铺）和repeat-y（纵向平铺）。⑤background-originbackground-origin属性用于规定背景图片的定位区域，背景图片可以放置于content-box、padding-box或border-box区域，示意图如图3-2所示。图3-2 背景图片放置位置的示意
此文档下载收益归作者所有
