13.6　使用CSS设计图片样式

图片是文本的解释和说明，在网页中适当的位置放置一些图片，不仅可以使文本更加容易阅读，而且可使网页更具有吸引力。下面就利用CSS制作一些网页特效。

13.6.1　鼠标指针移上时图片渐变的效果

下面利用alpha滤镜设置图像的透明度，来制作鼠标指针移上时图片渐变的效果，具体操作步骤如下：

1　打开HTML文档，在<head>与</head>之间相应的位置输入以下代码。

image309_1

image03提示

首先利用Alpha（opacity=60）定义原始图片的不透明度为60，然后利用Alpha（opacity=100）定义激活图片时的不透明度为100。

2　在图片标记的前面输入代码<a href=“http://www.one.com/” class=“highlightit”>，在图片标记的后面输入代码</a>。

image03提示

对图片应用样式highlightit。

3　保存文档，在浏览器中预览效果，如图13.20所示。

image309_2

图13.20　鼠标指针移上时图片渐变的效果

13.6.2　设计不重复出现的背景

利用background-repeat可以设置背景图像是否平铺，还可以设计不重复出现的背景，具体操作步骤如下：

1　打开HTML文档，在<head>与</head>之间相应的位置输入以下代码。

image310_1

image03提示

在CSS中利用background-image:url（images/175.jpg）定义背景图像的位置和名称，利用background-repeat:no-repeat设置背景图像不平铺。

2　保存文档，在浏览器中预览效果，如图13.21所示。

image310_2

图13.21　不重复出现的背景效果