第4章 节 使用CSS控制背景图像 CSS+DIV网页样式与布局从入门到精通课件.pptVIP

第4章 使用CSS控制背景图像 学习要点 CSS设置背景颜色的方法。 CSS控制背景图片的方法。 综合运用CSS的背景样式进行网页设计。 4.1 背景样式设置基础 4.1.1 设置页面背景色 CSS使用body标记的background-color属性来定义字体类型背景色。 background-color:color; 具体颜色值的设置方法与文字颜色的设置方法是一样的，可以采用十六进制、RGB分量和颜色的英文单词等。 4.1.2 设置背景色给页面分块 通过background-color属性，不仅可以设置页面的背景色，而且还能设置其他HTML元素的背景色。很多网页通过设置DIV块的背景色，从而实现给页面分块的目的。 4.1.5 定义背景图片的位置 默认情况下，背景图片都是从设置了background属性的标记的左上角开始出现，但实际制作网页过程中，可能希望图片出现在指定的位置。在CSS中使用background-position来调整图片的位置，该属性用法如下。 background-position : position|数值 其中position可以是center，center center，top left，top center，top right，center left，center right，bottom left，bottom center，bottom right；数值可以是百分数，如background-position：40% 60%，表示背景图片的中心点在水平方向上处于40%的位置，在竖直方向上处于60%的位置，此时如果改变浏览器的大小，背景图片也会相应地调整，但始终处于40%和60%的位置，除了百分数，还可以是具体的数值，如background-position：200px 40px，表示距离页面左侧200px，距离页面顶部40px，但是此时如果浏览器大小改变，图片不会做出相应调整，可能会出现图片显示不全的现象。 4.1.6 固定背景图片 对于大幅的背景图片，当浏览器出现滚动条时，通常希望图片不要随着文字的移动而移动，而是固定在一个位置上。CSS使用background-attachment属性来定义背景图片的固定，该属性用法如下： background-attachment: scroll | fixed 其中scroll指背景图片随着对象内容滚动，fixed则是将背景图片固定。 4.2 案例实战 4.2.1 设置网页背景颜色 4.2.2 设置带花纹边框 4.2.3 设置永远固定的背景 4.2.4 设置圆润的栏目模块