单元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-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属性用于规定背景图片的定位区域，背景图片可以放置于content-box、padding-box或border-box区域，示意图如图3-2所示。
图3-2 背景图片放置位置的示意图
⑥ background-attachment
background-attachment属性用于定义背景图像是否随对象内容滚动还是固定位置。其取值包括scroll（背景图像随对象内容滚动）和fixed（背景图像处在固定位置），默认值是scroll，也就是说，在默认的情况下，背景会随文档滚动。
⑦ background
background属性是一个复合属性，可以快速定义背景图像，其组成包括background-color、background-image、background-position、background-repeat和background-attachment，默认值为transparent none repeat scroll 0%，如果其单个属性没有显式定义，则取其默认值。世界最二国家
3．背景定位的方法
（1）应用位置关键字
图像放置关键字最容易理解，其作用如其名称所表明的。
（2）应用百分数值
百分数值的表现方式更为复杂。假设希望用百分数值将图像在其元素中居中。
我相信我就是我 我相信明天（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属性。
（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-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，在该样式文件中定义标签的属性、类选择符及其属性。中元节为什么叫鬼节
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论