新手基础学习:背景图片CSS在不同位置的写法

王朝网站推广·作者佚名  2011-12-04
窄屏简体版  字體: |||超大  

本文是写给新手的,高手就不要看了。

我们在制作网页时,有时为了美化网页,会为网页添加上背景图片

现在我们制作网页一般都是使用CSS来控制布局和页面效果的(css.css文件一般都是与图片文件放在同一个文件夹中的,如果也和网页文件一样放在外面的话,那么本文就没有讲的意义了,呵呵,我们现在要讲的是index.htm文件不在文件夹中,而是单独放在外面,以便让浏览者直接能访问到,而CSS文件和图片文件是放在同一个文件夹中的,即:images文件夹中)

CSS按其位置可以分成三种:

内嵌样式(Inline Style)

内部样式表(Internal Style Sheet)

外部样式表(External Style Sheet)

但不同的CSS位置会导致背景图片地址的写法也不同。下面先看一下三种样式表的表现形式:

内部样式表:

外部样式表:

站长学习网-www.zxx6.com

内嵌样式:

站长学习网-www.zxx6.com

外部样式和内部样式的图片地址应该是没有错,只要写上图片的名称,并且你已经在网页的头部的位置添加了 就没有问题,而现在是内嵌样式的问题,如果你只是简单的使用background-image: url(zxx6.jpg)这种路径,那么图片是不会显示的,只能是填写完整的路径如下(假设图片的真实地址是:http://www.zxx6.com/images/zxx6.jpg)

那么就要这样来写:

站长学习网-www.zxx6.com

,才能正常显示。

这就是在相同的条件下,样式图片写法不同的地方。一个是需要完整的图片路径,一个是因为CSS文件在htm文件中已经明确了路径,而不需要再重复添加。如果对于一个小页面,采用内嵌样式,填写图片的完整路径,因为使用的图片不多,也就无所谓了,但对于多个页面的话,还是使用外部样式的好。

本文欢迎转载,转载请以链接的方式注明:站长学习网-www.zxx6.com

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航