延安大学：《网页制作基础教程》课程PPT教学课件_第十五章 图片和定位

网页制作基础教程 牛永洁 延安大学计算中心

网页制作基础教程 延安大学计算中心 牛永洁

背景图片的使用 ◆我们可以给任何的元素添加背景。 令使用 background- mage:ur(路径) ◆注意这里的路径问题:该路径是相对于cSs所在 的文件而言。也就是相对于CSS所在的文件位置 为基准去寻找图片的路径

背景图片的使用 ❖我们可以给任何的元素添加背景。 ❖使用background-image:url(路径) ❖注意这里的路径问题：该路径是相对于css所在 的文件而言。也就是相对于CSS所在的文件位置 为基准去寻找图片的路径

图片路径示意图 sIte root images folder home page bg. gif styles folder styles. css

图片路径示意图

背景图片 令控制重复: background- repeat 条 no-repeat默认值 豪 repeat 条 repeat-X(水平方向) 米 repeat-y(垂直方向) ◆显示背景的顺序是从左到右,从上到下

背景图片 ❖控制重复：background-repeat no-repeat 默认值 repeat repeat-x（水平方向） repeat-y （垂直方向） ❖显示背景的顺序是从左到右，从上到下

背景图片 令定位背景图片: background- position ◇控制背景图片平铺的起点 令可以使用3种方式来控制起点: 关键字 >left center, right >top, center, bottom 精确值 豪百分比

背景图片 ❖定位背景图片：background-position ❖控制背景图片平铺的起点 ❖可以使用3种方式来控制起点： 关键字： ➢left, center, right ➢top, center, bottom 精确值： 百分比：

背景图片 body i background-image: url(bg_ page. jpg) background-repeat: no-repeat background-position centercenter

背景图片 body { background-image: url(bg_page.jpg); background-repeat: no-repeat; background-position: center center; }

背景图片 left center center center right center center bottom center top center center

背景图片

背景图片 令精确值:pX者em 令使用两个值,前一个值控制背景图片距离左边的 距离,后一个控制背景图片距离上边的距离。 ☆百分比

背景图片 ❖精确值：px或者em ❖使用两个值，前一个值控制背景图片距离左边的 距离，后一个控制背景图片距离上边的距离。 ❖百分比：

图片定位 0%0% 80%20% 50%50 100%100%

图片定位