14、控制颜色和背景

,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,控制颜色和背景,1,颜色,颜色属性并不陌生，它的用法很象HTML中使用的参数值。,B color: #FF0000 ,这个例子的效果是网页中对加粗字体使用指定的颜色(#FF0000)显示。,2,背景色,利用CSS在网页要素后面加入固定的背景色及图象，你甚至可以将要素只加到某一个单词后面。,P.yellow background-color: #FFFF66 ,3,背景图片,你可以很轻松地将GIF或JPEG图片设置成背景图片：,B background-image: url(background.gif) ,该规则将背景图象加到整个段落之后。你可以将GIF图象采用和背景图象通常的设置类似的方法平铺到文字后面，你还可以将背景图象只添加到两个单词后面。,你可以使用URL调用一幅图象，你既可以使用相对UPL，例如 images/bg.gif或完整的URL,例如,4,控制背景图片,你不仅可以将图象放在要素后面，你还可以精确地控制背景图象的各项设置。你可以决定是否及如何将其平铺，背景图象应该滚动还是保持固定，及将其放在什么位置。,5,控制背景图片,背景重复,(background-repeat),P background-repeat: no-repeat; background-image: url(background.gif) ,上述规则应用于整个段落。我们以前用过的GIF图象出现在文字后面，但由于我们应用了不重复图象（no-repeat)规则，所以该图象不会重复平铺在整个段落后面，它只显示一幅单独的图象。,如果你只想让图象垂直或者水平方向平铺，你以使用repeat-x将其水平平铺，用repaet-y将其垂直平铺。而repeat参数值则将图象从水平和垂直两个方向平铺。,6,控制背景图片,固定背景（,background,attachment,）,利用CSS的固定背景（background）属性，可以建立不滚动的背景图象，页面滚动时，背景图象可以保持固定。,BODY background-attachment: fixed; background-image: url(background.gif) ,其参数有两种选择：,scroll指背景图象随文字内容一起滚动，即通常所见的方式,fixed指文字滚动时，背景图象保持固定。,7,控制背景图片,背景定位,(background-position),你可以设定将背景插在什么位置显示。,P background-position: center bottom; background-image: url (background.gif) ,当上述CSS规则应用于本段文字时，背景图象将在本段的中下部开始显示并向右平铺。,设定位置的3种方法：,关键字参数（Keyword values）,长度参数,比例值（Percentage values）,8,控制背景图片,背景重复,(background-repeat),关键字参数（Keyword values）：,top将背景图象同前景要素的顶部对齐。,bottom将其同前景要素的底部对齐。,left将其同左边对齐。,right将其同右边对齐。,center将其水平居中（如果使用在另一关键字前面）或垂直居中（如果用在另一关键字后面）。,9,控制背景图片,背景重复,(background-repeat),长度参数，长度参数可以使用你对背景图象的位置作出更精确的控制。你可以设定水平和垂直定位起点，例：,P background-position: 70px 10px; background-repeat: repeat-y; background-image: url (background.gif) ,将GIF图象设置在从左上角起水平70象素，垂直10象素的位置。由于我设置了 background-repeat: repeat-y，GIF图象将在文字后垂直平铺。,10,控制背景图片,背景重复,(background-repeat),比例值（Percentage values），你还可以使用比例值设定背景图象的位置，例：,P background-position: 75% 50%; background-image: url (background.gif) ,当这条CSS规则应用于本段时，背景图象从水平距离段落右端70，垂直距离段落顶部50的位置显示。如果你重新调整浏览器窗口的尺寸，使得段落的显示尺寸变化，背景图象的位置也相应发生变化。,11,综合例子,cssStyle2.css,cssStyle2.html,12,小结,颜色,背景色,背景图片的添加和控制,13,