CSS图像样式

在五彩缤纷的网络世界中，各种各样的图片组成了丰富多彩的页面，能够让人更直观地感受网页所要传达给浏览者的信息，下面我们将介绍CSS设置图片风格样式的方法。

作为单独的图片，虽然它本身的很多属性都可以直接在HTML中进行调整，但是通过CSS统一管理，不但可以更加精确地调整图片的各种属性，还可以实现很多特殊的效果。图像的基本设置包括设置图像的边框、内外边距和大小等。在HTML中可以直接通过<img>标记的border属性值为图片添加边框，控制边框的粗细，border=“1”表示边框像素粗细，当设置该值为0时，则显示为没有边框。

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

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

在CSS中，图像经常以背景的形式出现，而且用途极为广泛。如果我们想在CSS中增加背景图片，可以增加如下样式代码：

body{
background-img:url(bg.gif);
} 

在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只希望沿着一个方向平铺，就可以使用background-repeat属性来控制。其中repeat-x代表只沿水平方向平铺，repeat-y代表只沿竖直方向平铺。

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

body{ 
background-color:#FFF;
} 

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

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

body{
background-img:url(bg-gg.gif); 
background-repeat:repeat-x; 
background-color:#FFF;
} 

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

body{
background:#FFF url(bg-gg.gif) repeat-x;
} 

标题的图像替换

对于正文字体，通常会在几种基本的字体中选择即可。而对于标题文字，如果仍然使用这几种最基本的字体，就会影响网页的美观。因此，设计师通常使用图像代替文本的方法来设置标题。

为了美观的要求，需要使用图像来替换文字 ，然而从另外的角度考虑，为了便于搜索引擎的理解和收录网页，也为了以后维护的考虑，把图像直接以<img>标记的方式嵌入到网页中，也不是一个好方法。

因此，一些CSS设计师发明了“图像替换”的方法来解决这个问题。其核心思想是使HTML中的文字仍以文本的形式存在，便于维持页面内容和结构完整性，然后通过CSS使文字不显示在页面上，而使图片以背景图像的形式出现，这样我们看到的就是美观的图像了。