HTML5+CSS3+JavaS教学幻灯片11.ppt

第11章 背景与边框 本章内容 11.1 背景相关属性 11.2 边框 11.3 边框圆角 11.4 图片边框 11.5 综合实例—简单公司主页 11.1 背景相关属性 11.1.1 背景颜色 11.1.2 背景图片 11.1.3 背景图片重复 11.1.4 背景图片显示 11.1.5 背景图片位置 11.1.6 背景图片大小 11.1.7 背景显示区域 11.1.8 背景图像裁剪区域 11.1.9 背景复合属性 11.1.1 背景颜色 background-color属性用于设定网页背景色，同设置前景色的color属性一样，background-color属性接受任何有效的颜色值，而对于没有设定背景色的标记，默认背景色为透明（tranaparent）。其语法格式为{background-color : transparent | color}。 实例：11.1.html background-color不仅可以设置整个网页的背景颜色，同样还可以设置指定HTML元素的背景色，例如设置h1标题的背景色，设置段落p的背景色。可以想象，在一个网页，可以根据需要，设置不同HTML元素的背景色。 实例：11.2.html 11.1.2 背景图片 网页中不但可以使用背景色来填充网页背景，同样也可以使用背景图片来填充网页。通过CSS3属性可以对背景图片进行精确定位。background-image属性用于设定标记的背景图片，通常情况下，在标记body中应用，将图片用于整个主体中。background-image语法格式为background-image : none | url (url)。 实例：11.3.html 11.1.3 背景图片重复 在进行网页设计时，通常都是一个网页使用一张背景图片，如果图片大小小于背景图片时，会直接重复铺满整个网页，但这种方式不适用于大多数页面，在CSS3中可以通过background-repeat属性设置图片的重复方式，包括水平重复、垂直重复和不重复等。 实例：11.4.html 11.1.4 背景图片显示 background-attachment属性用来设定背景图片是否随文档一起滚动。该属性包含两个属性值：scroll和fixed，并适用于所有元素。 实例：11.5.html 11.1.5 背景图片位置 background-position属性用于指定背景图片在页面中所处位置。该属性值可以分为四类：绝对定义位置（length）、百分比定义位置（percentage）、垂直对齐值和水平对齐值。其中垂直对齐值包括top、center和bottom，水平对齐值包括left、center和right。 实例：11.6.html 11.1.6 背景图片大小 CSS3中，新增了一个background-size属性，用来控制背景图片大小，从而降低网页设计的开发成本。background-size语法格式为background-size ：[ length | percentage | auto ]{1,2} | cover | contain。 实例：11.11.html 11.1.7 背景显示区域 在CSS3中，新增了一个background-origin属性，用来完成背景图片的定位。默认情况下，background-position属性总是以元素左上角原点作为背景图像定位，适应background-origin属性可以改变这种定位方式。background-origin ： border | padding | content。 实例：11.8.html 11.1.8 背景图像裁剪区域 在CSS3中，新增了一个background-clip属性，用来定义背景图片的裁剪区域。通俗的说，background-clip属性用来判断背景十分包含边框区域，而background-orgin属性用来决定background-position属性定位的参考位置。background-clip语法格式为background-clip ： border-box | padding-box | content-box | no-clip。 实例：11.9.html 11.1.9 背景复合属性 在CSS3中，background属性依然保持了一起的用法，即综合了以上所有与背景有关的属性（即以back-ground-开头的属性），可以一次性地设定背景样式。格式如下：background:[background-color] [background-image] [background-repeat] [background-attachment] [background-po