14、控制颜色和背景课件.ppt

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