CSS背景網址

有人可以幫忙解釋一下背景圖片的CSS網址的工作原理嗎？ CSS究竟知道從哪裏開始查找URL？例如我有這3個網址CSS背景網址

#web_content{ background: URL(images/background.jpg); } 
#web_content{ background: URL(/images/background.jpg); } 
#web_content{ background: URL(localhost:1234/newWebSite/images/background.jpg); }

我在不同的PC上嘗試了所有這3個。使用相同版本的所有網頁瀏覽器。基本上所有不同的是它運行的個人電腦。使用第一個例子，它只在一臺電腦上顯示，第二個例子顯示在兩臺電腦上，第三個例子顯示在所有電腦上......但當然在現實生活中使用它，因爲URL不起作用。有人能詳細解釋URL如何找到文件嗎？

來源

2013-07-23 5tar-Kaster

前兩個與頁面的URL有關，您還沒有告訴我們 - 它是否也在'localhost：1234'上，或者您是通過'file' URL還是其他地址訪問它？所有三臺電腦的網址是否相同？ – Spudley

不清楚，如果您在每臺PC上進行本地測試，或每臺PC都訪問某臺主機。 – DontVoteMeDown

第一個說要在CSS文件所在的同一目錄中查找image文件夾，然後指出background.jpg文件。

第二個說要進入root文件夾，然後查找image文件夾，然後查找名爲background.jpg的文件。

第三個說去一個domain再看看newWebSite文件夾，然後在image文件夾，然後指出該文件background.jpg。

它完全取決於你的目錄的結構，以及何時使用哪個URL。如果您CSS和Image文件夾是在同一目錄下，那麼你可以寫的網址是這樣的：

background-image: url(../images/background.jpg);

的../這裏會告訴CSS文件回去一個目錄，然後進入image文件夾。

如果您image文件夾是css文件夾中的子目錄，那麼你可以這樣寫：

background-image: url(images/background.jpg);

如果要包括從其他網站上的文件，那麼你可以這樣寫：

background-image: url(http://www.example.com/background.jpg);

如果你想找到一個位於你網站根目錄的文件夾，那麼你可以這樣寫：

background-image: url(/images/background.jpg);

/第一個在這裏表示要進入第一個父目錄的URL，然後查找image文件夾。

來源

2013-07-23 11:38:18

這正是我正在尋找的答案。非常感謝。 –

只是好奇而稍微偏離主題，但這也是所有在網頁開發中使用的網址的情況？像JavaScript的src URL和CSS鏈接的東西？ –

@ 5tar-Kaster Yup。 –

你沒有給我們足夠的信息來直接回答這個問題，所以我能想到的最好的方法就是向你展示如何爲自己找到解決方案。

在任何現代Web瀏覽器中，您都可以按F12調出開發工具窗口。打開此窗口加載頁面。

根據您使用的瀏覽器，確切的開發工具功能將有所不同，但它們都提供了查看瀏覽器內發生的網絡流量的能力。這將在開發工具中的標籤頁上。

查找網絡流量選項卡，您將看到一個正在加載頁面的條目，以及所有CSS，JS，圖像和其他資源的條目。

這會顯示瀏覽器嘗試加載的確切URL。它還會顯示任何發生的錯誤（例如404未找到錯誤）。

使用這個，你應該能夠計算瀏覽器在你描述的每個實例中的文件的位置，它應該是相當明顯的，從那裏它們有什麼不同以及爲什麼它在某些情況下工作，不是別人。

我希望有幫助。

來源

2013-07-23 11:40:51 Spudley

這實際上是一個很好的答案，如果他更清楚並說，在控制檯中查找錯誤並更正您的URI。這就是我所做的，但我們應該知道寫URL的模式。 –

回答

相關問題