HTML5+CSS3网页美化与布局单元3 网页图片与背景的美化与布局.pdf
版权申诉
176 浏览量
2022-11-19
13:47:18
上传
评论
收藏 1.68MB PDF 举报
单元 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"。
资源评论
