CSS背景圖片background-image須注意路徑問題!_DIV+CSS實例
教程Tag:暫無Tag,歡迎添加,賺取U幣!
在傳統(tǒng)的表格布局中,背景圖片是直接應(yīng)用于表格的,一般情況下CSS的background-image屬性使用非常少,或者說根本就不使用。應(yīng)用CSS網(wǎng)頁布局,實現(xiàn)內(nèi)容與表現(xiàn)、行為相分離,作為頁面框架、裝飾等圖片我們就直接剝離到CSS文件中,通過CSS進(jìn)行定義。
我們通常用link的方法直接引用一個CSS文件到HTML(或其它活動文檔)文件中。我們會發(fā)現(xiàn)有時候我們的圖片無法顯示了。此時,請查看你的CSS代碼,是不是重復(fù)設(shè)置有問題,是不是圖片的定位有問題。假如這些都沒有問題請去掉background的重復(fù)與定位屬性,還原成默認(rèn)性。假如圖片還是沒有出現(xiàn),那只能是我們今天所說的路徑問題了!在一般情況下,我們習(xí)慣于這樣設(shè)置圖片路徑:
對于第一種情況“url(logo.jpg)”。我們要看此圖片是不是與CSS文件在同一目錄。對于第二與第三種情況,我們是極力不推薦使用的,因為我們的網(wǎng)頁文件可能存在于多級目錄中,不同級目錄的文件位置注定了我們的相對路徑是不一樣的。而這樣就讓問題復(fù)雜化了,很可能圖片在這個文件中顯示正常,換了一級目標(biāo),圖片就找不到影子了。
有一種方法可以輕松解決這一問題,我們可能建立一個公共文件目錄,用來存放一些公用的圖片文件,JS腳本,CSS文件,例如“common”,我們將CSS文件直接置于該目錄中,也可以將圖片文件也直接存于該目錄中,假如圖片文件較多在其內(nèi)部建立一個目錄存放圖片文件“common/images”。我們在CSS文件中直接寫:url(logo.jpg)或url(images/logo.jpg)就可以搞定上面的問題了。
當(dāng)然,這只是我的建議,關(guān)于網(wǎng)站文件的歸類與存放,除了根據(jù)個人習(xí)慣,還要考慮科學(xué)性。我的方法也不一定是正確的。假如是大型的項目,你應(yīng)該遵循團(tuán)隊的約定,不然這些問題是夠頭疼的!
我們通常用link的方法直接引用一個CSS文件到HTML(或其它活動文檔)文件中。我們會發(fā)現(xiàn)有時候我們的圖片無法顯示了。此時,請查看你的CSS代碼,是不是重復(fù)設(shè)置有問題,是不是圖片的定位有問題。假如這些都沒有問題請去掉background的重復(fù)與定位屬性,還原成默認(rèn)性。假如圖片還是沒有出現(xiàn),那只能是我們今天所說的路徑問題了!在一般情況下,我們習(xí)慣于這樣設(shè)置圖片路徑:
示例代碼 [m.dounai2.com]
background-image:url(logo.jpg);
background-image:url(../logo.jpg);
background-image:url(../images/logo.jpg);
background-image:url(../logo.jpg);
background-image:url(../images/logo.jpg);
對于第一種情況“url(logo.jpg)”。我們要看此圖片是不是與CSS文件在同一目錄。對于第二與第三種情況,我們是極力不推薦使用的,因為我們的網(wǎng)頁文件可能存在于多級目錄中,不同級目錄的文件位置注定了我們的相對路徑是不一樣的。而這樣就讓問題復(fù)雜化了,很可能圖片在這個文件中顯示正常,換了一級目標(biāo),圖片就找不到影子了。
有一種方法可以輕松解決這一問題,我們可能建立一個公共文件目錄,用來存放一些公用的圖片文件,JS腳本,CSS文件,例如“common”,我們將CSS文件直接置于該目錄中,也可以將圖片文件也直接存于該目錄中,假如圖片文件較多在其內(nèi)部建立一個目錄存放圖片文件“common/images”。我們在CSS文件中直接寫:url(logo.jpg)或url(images/logo.jpg)就可以搞定上面的問題了。
當(dāng)然,這只是我的建議,關(guān)于網(wǎng)站文件的歸類與存放,除了根據(jù)個人習(xí)慣,還要考慮科學(xué)性。我的方法也不一定是正確的。假如是大型的項目,你應(yīng)該遵循團(tuán)隊的約定,不然這些問題是夠頭疼的!
相關(guān)DIV+CSS實例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個很酷的涂鴉風(fēng)格國外網(wǎng)店設(shè)計展示
- jquery模擬瀏覽器滾動條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁最后更新時間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實例:很實用的圖文混排CSS列表-富有語義
- DivCSS實例:CSS菜單Flash效果用圖片模擬實現(xiàn)
- DivCSS布局實例用dldtdd來制作列表
- 相關(guān)鏈接:
- 教程說明:
DIV+CSS實例-CSS背景圖片background-image須注意路徑問題!。