您当前的位置: 首页 » DIV+CSS编程 » CSS网页设计中使用背景图片须注意路径问题
CSS网页设计中使用背景图片须注意路径问题
论坛链接
网页设计技巧文章，CSS网页设计中使用背景图片须注意路径问题。
在传统的表格布局中，背景图片是直接应用于表格的，一般情况下CSS的background-image属性使用非常少，或者说根本就不使用。应用CSS网页布局，实现内容与表现、行为相分离，作为页面框架、装饰等图片我们就直接剥离到CSS文件中，通过CSS进行定义。中国站长第一门户
我们通常用link的方法直接引用一个CSS文件到HTML（或其它活动文档）文件中。我们会发现有时候我们的图片无法显示了。此时，请查看你的CSS代码，是不是重复设置有问题，是不是图片的定位有问题。如果这些都没有问题请去掉background的重复与定位属性，还原成默认性。如果图片还是没有出现，那只能是我们今天所说的路径问题了！在一般情况下，我们习惯于这样设置图片路径：
background-image:url(logo.jpg);
background-image:url(../logo.jpg);
background-image:url(../images/logo.jpg);
对于第一种情况“url(logo.jpg)”。我们要看此图片是不是与CSS文件在同一目录。对于第二与第三种情况，我们是极力不推荐使用的，因为我们的网页文件可能存在于多级目录中，不同级目录的文件位置注定了我们的相对路径是不一样的。而这样就让问题复杂化了，很可能图片在这个文件中显示正常，换了一级目标，图片就找不到影子了。中国站长第一门户
有一种方法可以轻松解决这一问题，我们可能建立一个公共文件目录，用来存放一些公用的图片文件，JS脚本，CSS文件，例如“common”，我们将CSS文件直接置于该目录中，也可以将图片文件也直接存于该目录中，如果图片文件较多在其内部建立一个目录存放图片文件“common/images”。我们在CSS文件中直接写：url(logo.jpg)或url(images/logo.jpg)就可以搞定上面的问题了。中国站长资讯网
当然，这只是我的建议，关于网站文件的归类与存放，除了根据个人习惯，还要考虑科学性。我的方法也不一定是正确的。如果是大型的项目，你应该遵循团队的约定，不然这些问题是够头疼的！
在传统的表格布局中，背景图片是直接应用于表格的，一般情况下CSS的background-image属性使用非常少，或者说根本就不使用。应用CSS网页布局，实现内容与表现、行为相分离，作为页面框架、装饰等图片我们就直接剥离到CSS文件中，通过CSS进行定义。中国站长第一门户
我们通常用link的方法直接引用一个CSS文件到HTML（或其它活动文档）文件中。我们会发现有时候我们的图片无法显示了。此时，请查看你的CSS代码，是不是重复设置有问题，是不是图片的定位有问题。如果这些都没有问题请去掉background的重复与定位属性，还原成默认性。如果图片还是没有出现，那只能是我们今天所说的路径问题了！在一般情况下，我们习惯于这样设置图片路径：
background-image:url(logo.jpg);
background-image:url(../logo.jpg);
background-image:url(../images/logo.jpg);
对于第一种情况“url(logo.jpg)”。我们要看此图片是不是与CSS文件在同一目录。对于第二与第三种情况，我们是极力不推荐使用的，因为我们的网页文件可能存在于多级目录中，不同级目录的文件位置注定了我们的相对路径是不一样的。而这样就让问题复杂化了，很可能图片在这个文件中显示正常，换了一级目标，图片就找不到影子了。中国站长第一门户
有一种方法可以轻松解决这一问题，我们可能建立一个公共文件目录，用来存放一些公用的图片文件，JS脚本，CSS文件，例如“common”，我们将CSS文件直接置于该目录中，也可以将图片文件也直接存于该目录中，如果图片文件较多在其内部建立一个目录存放图片文件“common/images”。我们在CSS文件中直接写：url(logo.jpg)或url(images/logo.jpg)就可以搞定上面的问题了。中国站长资讯网
当然，这只是我的建议，关于网站文件的归类与存放，除了根据个人习惯，还要考虑科学性。我的方法也不一定是正确的。如果是大型的项目，你应该遵循团队的约定，不然这些问题是够头疼的！