关闭顶部展开顶部

CSS背景图片background-image须注意路径问题!_DIV+CSS实例

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!
  在传统的表格布局中,背景图片是直接应用于表格的,一般情况下CSS的background-image属性使用非常少,或者说根本就不使用。应用CSS网页布局,实现内容与表现、行为相分离,作为页面框架、装饰等图片我们就直接剥离到CSS文件中,通过CSS进行定义。

  我们通常用link的方法直接引用一个CSS文件到HTML(或其它活动文档)文件中。我们会发现有时候我们的图片无法显示了。此时,请查看你的CSS代码,是不是重复设置有问题,是不是图片的定位有问题。假如这些都没有问题请去掉background的重复与定位属性,还原成默认性。假如图片还是没有出现,那只能是我们今天所说的路径问题了!在一般情况下,我们习惯于这样设置图片路径:

示例代码 [www.mb5u.com]
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)就可以搞定上面的问题了。

  当然,这只是我的建议,关于网站文件的归类与存放,除了根据个人习惯,还要考虑科学性。我的方法也不一定是正确的。假如是大型的项目,你应该遵循团队的约定,不然这些问题是够头疼的!

来源:无忧整理//所属分类:DIV+CSS实例/更新时间:2007-04-11
loading.. 评论加载中....
相关DIV+CSS实例
闂佹眹鍩勯崹閬嶆偤閺囶澁缍栭柛鈩冪⊕閳锋帗銇勯弴妤€浜惧銈忕秶閹凤拷
濠电偛顕慨顓㈠磻閹炬枼妲堥柡鍌濇硶婢ф稒淇婇懠顒夆偓婵嬫煟閵忊晛鐏查柟鍑ゆ嫹
濠电姷顣介埀顒€鍟块埀顒勵棑缁辩偛顓兼径瀣閻庣懓瀚竟鍡欐崲娑斾線鏌i姀鈺佺伈闁瑰嚖鎷�
濠电姷顣介埀顒€鍟块埀顒勵棑缁辩偛顓兼径濠勵吋闂佽鍨庨崟顓фК闂佽閰eḿ褍螞濞戙垺鍋夐柨鐕傛嫹
闂備胶枪缁绘劙骞婃惔銊ョ劦妞ゆ帒鍊哥敮鍫曞箹鐎涙ḿ鐭掔€规洘绻堥弫鎾绘晸閿燂拷
闂備胶枪缁绘劙骞婃惔銊ョ劦妞ゆ巻鍋撻柛姘儑缁﹪鏁傞崜褏鐓撻柣搴岛閺呮繈鎯屽▎鎴犵=濞撴艾锕ョ€氾拷
闂備浇銆€閸嬫挻銇勯弽銊р槈闁伙富鍣i弻娑樷攽閹邦亞鑳虹紓浣靛妽濡炶棄顕i妸鈺婃晬婵炲棙鍨电粭锟犳⒑閸濆嫬鈧骞婇幘鑸殿潟闁跨噦鎷�
闂備礁鎼崯鐗堟叏妞嬪海绀婂鑸靛姈閻擄綁鎮规潪鎷岊劅婵炲眰鍊曢湁闁挎繂妫欑粈鈧梺鍛娚戦悧鐘茬暦閹扮増鏅搁柨鐕傛嫹
婵犵妲呴崹顏堝礈濠靛棭鐔嗘俊顖氬悑鐎氱粯銇勯幘瀵哥畺閻庢熬鎷�
濠电姷顣介埀顒€鍟块埀顒勵棑缁辩偛顓奸崶銊ヮ伕濡炪倖鎸荤换鍐偓姘虫珪娣囧﹪顢涘Δ鈧晶鍙夌節椤喗瀚�
婵犵妲呴崹顏堝礈濠靛棭鐔嗘慨妞诲亾鐎规洦鍓熼、娆撳礂閻撳簶鍋撻悽鍛婄厸闁割偅绻勫瓭婵犳鍣幏锟�
婵犵妲呴崹顏堝礈濠靛棭鐔嗘慨妞诲亾闁哄苯鎳橀崺鈧い鎺嗗亾闁宠閰i獮鎴﹀箛闂堟稒顔嗛梻浣告惈鐎氭悂骞忛敓锟�
婵犵妲呴崹顏堝礈濠靛棭鐔嗘慨妞诲亾鐎规洩缍侀獮瀣攽閸偂绱�
濠电姷顣介埀顒€鍟块埀顒勵棑缁辩偛顓兼径濠勭厬闂佺懓鐡ㄧ换鍕敂鐎涙ü绻嗘い鏍殔婢у弶绻濋~顔藉
闂佽楠搁崢婊堝礈濠靛鍋嬮柟鎯版閻鈹戦悩鎻掓殭闁奸潧缍婇弻銈夋嚍閵夈儱顫嶉梺缁樼壄缂嶄礁鐣峰▎鎾存櫢闁跨噦鎷�
UB闂備礁婀辩划顖炲礉濡ゅ懐宓侀柛銉㈡櫆鐎氭岸鎮楀☉娅虫垿锝為敓锟�
闂備浇澹堟ご绋款潖婵犳碍鐒鹃悗鐢电《閸嬫捇鐛崹顔句痪濠电姭鍋撻柨鐕傛嫹
闂佽楠哥粻宥夊垂閸濆嫸鑰块柛銏㈠殰
闂備礁鎲″缁樻叏妞嬪海绀婂璺虹灱閸楁碍绻涢崱妤€顒㈤柛鐐差槹缁绘稓绱欓悩鍝勫帯闂佺ǹ楠忛幏锟�
缂傚倸鍊烽悞锕傛偡閿曞倸鍨傛繝濠傚椤╅攱銇勯幒宥囶槮缂佹彃婀遍埀顒傚仯閸婃繄绱撳棰濇晩闁跨噦鎷�
©2017 www.mb5u.com婵犵妲呴崹顏堝礈濠靛棭鐔嗘慨妞诲亾鐎殿噮鍣i幃鈺呭箵閹烘挸鐦�
闂備浇銆€閸嬫捇鏌熼婊冾暭妞ゃ儻鎷�&闂備礁鎲$敮鎺懳涢弮鍫燁棅闁跨噦鎷�