5.2 CSS图像样式

在五彩缤纷的网络世界中，各种各样的图片组成了丰富多彩的页面，能够让人更直观地感受网页所要传达给浏览者的信息。本节将介绍CSS设置图片风格样式的方法，包括图片的边框、对卉方式和图文混排等，并通过实例综合掌握文字和图片的各种运用。

一、基本设置

作为单独的图片，虽然它本身的很多属性都可以直接在HTML中进行调整，但是通过CSS统一管理，不但可以更加精确地调整图片的各种属性，还可以实现很多特殊的效果。本节主要讲解用CSS设置图片基本属性的方法，为进一步深入探讨打下基础。

图像的基本设置包括设置图像的边框、内外边距和大小等。在HTML中可以直接通过<img>标记的border属性值为图片添加边框，控制边框的粗细，border="1"表示边框为1像素粗细，当设置该值为0时，则显示为没有边框。

在HTML中，可以设置的样式很少而且很单调，而使用CSS的border属性则可以设置丰富得多的样式效果。

设置图像的边框，与设置其他元素的边框的方法完全相同。

例如，在前一节的基础上，把第一个文字段落换为一个<img>，即图像元素，然后设置如下CSS样式：lodidance.com

1. img{  
2.     border:1px gray dashed;  
3.     margin:10px 10px 10px 0;  
4.     padding:5px;  
5.     float:left;  
6. } 

效果如图1所示．可以看到设置图像的边框样式、内边距、外边距和浮动等基本属性，与设置其他元素的基本属性的方法是完全一致的。也可以看出，CSS的盒子模型所起的巨大作用。在CSS中，任何一个对象本身都是一个盒子，对于一个图像而言，图像本身就是盒子的内容，因此边框、内外边距等部分就都是顺理成章的了。

图1 对图像元素设置CSS样式

该文件请参考网页学习网CSS教程资源中的“第5章/图像/basic.htm”。

在CSS中，也可以设置图像的高度和宽度，同样是使用盒子模型中统一的height和width属性。设置时可以使用具体的长度，例如“100px”，也可以使用相对比例，例如“70%”。

二、背景图像

在CSS中，图像经常以背景的形式出现，而且用途极为广泛。本教程后面的章节中，读者还将学习到通过使用背景图像的方法，实现很多特殊的效果。

1.设置背景图像

在前面已经介绍了使用background-color属性给元素设置背景颜色。在CSS中，还可以使用图像作为某个元素的背景，例如整个页面的背景使用背景图像来设置。设置背景图像要使用background-image属性。

仍然以上面的实例为基础，在CSS样式部分增加如下样式代码。

1. body{  
2. background-image:url(bg.gif);  
3. } 

然后准备一个图像文件，如图2所示。

图2 准备一个图像文件

这个图片的左上部分为灰色，右下部分为白色。为了使页面上的文字不至于和背景混在一起，可以把p标记的背景色设置为白色，这时的效果如图3所示。

图3 页面的body元素设置了背景图像后的效果

可以看到，用这种方式设置背景图像以后，图像会自动沿着水平和竖直两个方向平铺。

其他元素也同样可以使用背景图像，例如将实例中的h1标记的背景由原来的背景色，改为使用图像作为背景，效果如图4所示。该文件请参考网页学习网CSS教程资源中的“第5章/图像/backgroud.htm”。

图4 h1标题使用背景图像的效果

在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只希望沿着一个方向平铺，可以使用background-repeat属性来控制。该属性可以设置为4种平铺方式。

● repeat:沿水平和竖直两个方向平铺。

● no-repeat：不平铺，即只显示一次。

● repeat-x：只沿水平方向平铺。

● repeat-y：只沿竖直方向平铺。

例如，先准备一个如图5所示的图像。

图5 渐变色构成的背景图像

然后，对body元素设置如下CSS样式，并去除刚才对h1标题的背景图像的设置。

1. body{  
2.     background-image:url(bg-grad.gif);  
3.     background-repeat:repeat-x;  
4. } 

这时效果如图6所示，可以看到，背景图像只是沿着水平方向平铺了。

图6 水平方向平铺背景图像的效果

3.同时设置背景图像和背景颜色

在CSS中还可以同时设置背景图像和背景颜色，这样背景图像覆盖的地方就显示背景图像，背景图像没有覆盖到地方就按照设置的背景颜色显示。例如，在上面的body元素CSS设置中，增加一条规则：

1. background-color:#3399ff; 

这时效果将如图7所示。该文件请参考网页学习网CSS教程资源中的“第5章/图像/repeat-image.htm”。

图7 同时设置背景图像和背景颜色

这个技巧非常有用，大家看到图7中的背景色的过渡非常自然，这是因为背景颜色正好设置为背景图像中最下面一排像素的颜色，这样可以制作出非常自然的渐变色背景。而且可以保证，无论页面多高，颜色都可以一直延伸到页面的最下端。lodidance.com

第2章所示的是CSS禅意花园网站的第158号作品，可以看到这个非常漂亮亮的网页的背景色，正是使用这种方法制作出来的。

http://www.csszengarden.com/?cssfile=158/158.css

其上部使用一个水平方向平铺的图像背景，下面则是整体一致的背景颜色。

4.背量样式属性的简写

就如同font、border等属性在CSS中可以简写一样，背景样式的CSS属性也可以简写。例如下面这段样式，使用了3条CSS规则。

1. body{  
2. background-image:url(bg-grad.gif);  
3. background-repeat:repeat-x;  
4. background-color:#3399FF;  
5. } 

它完全等价于下面这条CSS规则。

1. background:#3399FF url(bg-grad.gif) repeat-x;