打印

[讨论] CSS中背景图片的路径

CSS是用于控制表现层的,而对于我们现在的页面而言,表现层存在两层含义:布局和风格!

布局就不需要多说了,曾经非常流行左中右三栏结构,现在相对而言两栏结构越来越受欢迎。日常工作中大家比较常遇到问题的地方其实就是布局,诸如IE6的3px,双倍边距等BUG,都将直接导致页面变形。不过今天我要说的却不是布局,而是另外一个重要的方面:风格。

总所周知,单纯依靠CSS只能定义各元素的背景颜色、边框颜色及字体颜色,这样出来的站点的风格就会清爽得有些寒碜,Facebook就是这方面比较典型的例子。对于国内互联网目前的形势,很多“专业的领导”会一再强调视觉冲击力,页面越炫丽越好,色彩越多越好,图片越多越好,最好还带闪的,能动的都给我动起来,晃死人不偿命……

于是乎,我们众多的所谓“前端开发工程师”们的磨难开始了,大量的图片,需要写入到CSS里面,这个时候就涉及到一个路径的问题了,到底
复制内容到剪贴板
代码:
background: url(http://pics.taobaocdn.com/bao/album/sys/mytaobao-new-v2.gif)
这样的绝对路径好呢还是
复制内容到剪贴板
代码:
background:url(images/loading_v2.gif)
这样的相对路径好呢?

看到这里估计各位高手已经开始笑我菜了,又或者觉得这个问题没必要这么小题大作,不过这样的问题确实是存在的,并且在每一个大大小小的网站都存在。

当我们的站很小的时候,比如个人网站,个人博客,所有的文件都是放在一台服务器上,甚至有许多朋友(包括我自己)还是买的虚拟主机,几百M的小小空间,压根儿没有必要考虑这些问题,直接相对路径完了,包括内容图片的插入也是相对路径完事儿,写绝对路径多麻烦啊,那么长一串儿……

可是当我们的站访问量上去了之后,一台服务器还扛得住吗?这确实是个问题,并且所有的文件杂糅在一起,这样也会带来管理问题。而对于下载,图片,音乐,视频一类的网站尤其突出。所以我们很多时候会在下载站上看到一长串的下载服务器地址,也会经常看到
复制内容到剪贴板
代码:
http://img.xxx.com/css/base.css
复制内容到剪贴板
代码:
http://img.xxx.com/js/base.js
一类的地址。

对于比较大型的站,通常会有专用的服务器放内容图片(通过
复制内容到剪贴板
代码:
<img src="somepic.jpg" alt="图片说明" />
插入的图片);会有主服务器用来放页面,也就是我们敲的XHTML代码,属于3层分离的结构层;会有专用服务器用来放JS,CSS及CSS用到的背景图片,也就是表现层和行为层的全部东东;当然通常还有专用的数据服务器;缓存服务器;等等。并且很有可能前面提到的各类服务器都不只一台。

我还没有注意过哪家网站用于存放JS,CSS及CSS用到的背景图片的服务器不只一台,不过注意到不少的网站是把JS,CSS,背景图片,内容图片统一放到一台img.xxx.com的服务器上。并且文件结构JS放在JS目录里面,CSS放在CSS目录里面,内容图片通常会根据日期自动命名放在相应的以月份或者某一天命名的目录里面,背景图片则放在IMG目录里面,分门别类。这样看起来似乎组织得很好了,整个世界清净了。

但是由于很难描述这种情况下背景图片相对于CSS文件的位置,写CSS的时候就需要写冗长的绝对路径。导致CSS文件体积进一步臃肿。直接带来的是开发的工作量以及服务器存储代价,带宽占用,加载速度等各方面的问题。当然很多人可能会说,这样便于迁移啊,不管CSS文件迁移到什么地方,图片都能显示无误。好像也挺有道理,那万一背景图片的地址改变了呢?服务器地址改了都还可以采用301重定向等方法解决,那如果文件结构改变了呢?那是不是得查找替换所有的CSS文件?

我们为什么不让图片跟着CSS文件走呢?比如昨天我在工作中遇到的一个问题,我写完页面和CSS之后,交给后台程序员,后台程序员说我得改动CSS,把里面的相对路径换成绝对路径。我当时所有的背景图片都放在了相对于CSS文件的img目录下,在定义背景的时候就使用了url("img/sompic.png")这样的相对路径。程序员说JS上传到服务器上之后会变成wwwroot/JS/APP/someapp/JS/XXX.JS 这样的路径。(wwwroot代指根目录)CSS文件:wwwroot/CSS/APP/someapp/CSS/XXX.CSS ;背景图片wwwroot/img/APP/someapp/img/XXX.png这样的结构。于是相对路径就不能用了,这里就出现了我刚才的疑问,我们为什么不可以把背景图片放到wwwroot/CSS/APP/someapp/CSS/img/XXX.png这样的目录下面呢?背景图片也属于样式的一部分,这样只要保证CSS文件夹内的文件结构不变,不管你部署到哪里,你都只需要一个绝对地址指向CSS文件,而不管CSS文件和相关的背景图片放在哪台服务器的那个目录下,迁移起来也会很方便灵活,直接将CSS文件和IMG目录一起迁移就好了。而如果采用之前的方式,你的CSS迁移了,但是图片呢?还得去找到相应的目录,然后迁移过去,然后再批量替换URL("")里面的地址。

到底那种更灵活呢? 各位高手,你们怎么看?

[ 本帖最后由 youhuata 于 2008-8-21 19:23 编辑 ]