教学课件 网页设计基础.ppt

10.5 背景与颜色的使用 设置颜色方法 背景颜色的属性 背景图片的属性 设置颜色方法 利用RGB设置颜色 利用RGB函数设置颜色 利用颜色名称设置颜色 利用RGB设置颜色 在HTML网页，或者CSS样式的颜色定义里，设置颜色的方式是利用RGB概念，在RGB的概念中，所有颜色都是由红色、绿色、蓝色混合而成。 CSS则有四种定义颜色的方法： 十六进制数 RGB函数（整数） RGB函数（百分比） 颜色名称 在计算机中，定义每种颜色的强度都是由0~255。当所有颜色的强度为0时，将产生黑色，当所有颜色的强度都是255时，将产生白色。在HTML中，要使用RGB来指定颜色时，将使用#号，加上6个十六进制的数字来表示，表示方法如下： #RRGGBB 其中R，G，B这三个字母的值范围0，1，2，3，4，5，6，7，8，9，a，b，c，d，e，f这16个数字。比如要表示红色的值，则表示方法为：#FF0000。 利用RGB函数设置颜色 在CSS里，可以利用RGB函数，加上三组范围为0~255的数字来设置所要的颜色。因为每组数字可表现256种颜色强度，所以利用RGB函数共可表达出256*256*256种颜色表示方法如下： RGB(R，G，B) 其中，R，G，B代表的整数范围为0~255。 比如现在要表示红色的值，则表示方法为：RGB（255，0，0）。 利用颜色名称设置颜色 背景颜色的属性 在HTML里，可以使用bgcolor属性来设置网页的背景颜色，而在CSS里，不仅可以用background-color属性来设置网页背景颜色的变化，还可以设置文字的背景颜色。 基本语法： background-color：关键字 | RGB值 | transparent语法说明： transparent表示透明的意思，也是浏览器的默认值。 !--程序10-21-- htmlhead title背景颜色的属性/title style type=text/css !-- body{background-color:# ADD8E6} .p1{background-color:#FF0000;font-size:30px} .p2{background-color:yellow;font-size:30px} -- /style /headbody p class=p1此行文字以红色背景显示n/p p class=p2此行文字以黄色背景显示/p/body/html 背景图片的属性 background-image插入背景图片 background-attachment插入背景附件 background-repeat设置重复背景图片 background-position设置背景图片位置 background-image插入背景图片 除了可以设置背景的颜色以外，还可以用background-image来设置背景图片。 基本语法： background-image:url | none 语法说明： url表示要插入背景图片的路径，路径可以是绝对路径也可以是相对路径，none表示不加载图片。 background-attachment插入背景附件 background-attachment背景附件属性是用来设置背景图片是否随着滚动条的移动而一起移动。 基本语法： background-attachment：scroll | fixed 语法说明： scroll表示背景图片是随着滚动条的移动而移动，是浏览器的默认值；fixed表示背景图片固定在页面上不动，不随着滚动条的移动而移动。 background-repeat设置重复背景图片 background-img属性设置网页的背景图片重复显示方式。 基本语法： background-repeat：repeat | repeat-x | repeat-y | no-repeat 语法说明： repeat表示背景图片在水平和垂直方向平铺，是默认值；repeat-x表示背景图片在水平方向平铺；repeat-y表示背景图片在垂直方向平铺；no-repeat表示背景图片不平铺。 background-position设置背景图片位置 当在网页中插入背景图片时，每一次插入的位置，都是位于网页的左上角，所以通过background-position属性来改变图片的插入位置。 基本语法： background-position：百分比 | 长度 | 关键字 语法说明： 利用百分比和长度来设置图片位置时，都要指定两个值，并且这两个值都要用空格隔开。一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是网页