首页 > 代码库 > 5.2 CSS图像样式

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;  

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

图1 对图像元素设置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);  

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

图2 准备一个图像文件
图2 准备一个图像文件

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

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

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

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

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

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

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

● no-repeat:不平铺,即只显示一次。

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

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

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

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

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

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

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

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

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

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

  1. background-color:#3399ff

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

图7 同时设置背景图像和背景颜色
图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;  

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

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

注意:属性之间用空格分隔。本教程后面的章节中将主要使用这种简写的形式。

 

编辑:网页学习网
本文地址:http://www.lodidance.com/css/jc/681.html