【网页布局设计】项目四 使用CSS设置图片效果 与网页背景

《CSS+DIV网页样式与布局案例教程》 徐琴

任务一 制作休闲文章页面——设置图片效果

图片在网页制作中可分为两大类，一类是插入图片，它是作为HTML结构存在的；另一类是背景图片，它是作为CSS样式表而存在的。在本任务的实例中将讲解到这两类图片的设置方法，大家在学习的过程中需要注意。

支撑知识点

一、设置图片和其他元素大小

在CSS中，可以利用height（高度）和width（宽度）这两个属性来设置图片及块元素之类的对象大小。这两个属性的使用很简单，其语法格式为：height:高度值;或width:宽度值; 。
与项目三中学习的设置文字大小一样，在设置height和width的属性值时可以使用多种单位，常用的有%（百分比）和px（像素）。

二、设置图片和其他元素边框

在CSS中，设置图片和其他元素的边框主要分成3个属性：边框样式、边框宽度和边框颜色。这3个属性是统一的，一般情况下都需要设置。

设计边框样式的属性：border-style
调整边框宽度的属性：border-width
设置边框颜色的属性：border-color

三、设置图片的对齐方式

1．水平对齐

图片的水平对齐与项目三介绍的文字水平对齐的方式基本相同，分为左、中、右3种。图片的水平对齐不能直接通过设置图片的text-align属性实现，而是通过设置其父元素的text-align属性来实现的。

2．垂直对齐

在CSS中可以使用vertical-align属性来控制图片的垂直对齐方式，它主要应用在图片与文字搭配的情况下。其各属性值的意义如下表所示。

四、设置图文混排

在网页中经常会出现图文混排的情况，这种效果是使用CSS为图片设置左浮动或右浮动属性来实现的。

图片居于文字右边：float:right;
图片居于文字左边：float:left;

另外，我们可以使用margin属性设置图片同文字之间的距离。

任务二 制作童话故事页面——设置网页元素背景

在HTML中背景图片是通过重复平铺实现的，在CSS中处理更加灵活，可以通过CSS样式控制背景图片，并放到任意位置。本任务通过制作童话故事页面，重点学习使用CSS设置背景颜色及控制背景图片的方法。

支撑知识点

一、设置背景颜色

设置背景颜色是指使用CSS设置整个页面（通过设置标签）或指定的HTML元素（如

块）内的背景颜色，属性为background-color。我们在前面的任务实施中也多次用到该属性，其具体颜色值的设置方法与文字颜色的设置方法一样，可以采用十六进制，RGB各颜色的分量和颜色的英文单词等。

二、设置背景图片

设置背景图片是指使用CSS为整个页面或指定的HTML元素设置背景图片，在使用CSS插入背景图片后，还可以使用CSS的其他属性控制背景图，如设置背景图的位置，以及是否重复和固定等。在CSS中设置背景图片的属性如下。

插入背景图片：background-image

利用CSS插入背景图片的语法格式为：background-image:ulr(背景图片的路径和名称); 。背景图片的路径可以为绝对路径也可以为相对路径，具体可参考项目二任务一支撑知识点中的讲解；图片的格式一般以GIF、JPG和PNG为主。

设置背景图片的重复方式：background-repeat

使用background-repeat属性可以设置背景图片的重复方式，包括水平重复、竖直重复和不重复等，其语法格式为：background-repeat:属性值; ，各属性值的意义如下表所示。默认情况下，背景图片将从其所在元素的左上角开始重复。

设置背景图片的位置：background-position

当背景图像不重复铺满其所在元素的区域时，可使用background-position属性设置背景图片位置，其语法格式为：background-position:属性值; ，各属性值的意义如下表所示。

固定背景图片：background-attachment

如果页面比较长，那么当网页向下滚动时，背景图像也会随之滚动，当网页滚动到超过图像的位置时，图像就会消失。为此，可利用background-attachment属性允许或防止这种滚动，其语法格式为：background-attachment:属性值; ，各属性值的意义如下表所示。

5．背景样式综合设置

与border属性一样，也可以使用background属性将关于背景的各种属性值集成到一个语句中，中间用空格隔开，从而使CSS代码显得更简洁。如下：

background:red url(bg6.jpg) no-repeat fixed 5px 10px;