css程式碼與引用圖片的相對路徑
大家知道通過css程式碼可以引入圖片等資源,這裡就涉及到一個路徑問題,下面就做一下簡單介紹。
一.css程式碼直接在當前頁面:
使用內部樣式表和內聯樣式就是css程式碼和當前頁面在一起的,那麼引用圖片路徑的時候,其實就是相對於當前css程式碼位置的相對路徑,比如有以下文件結構:
如果我們想在index.html頁面中使用image資料夾下的圖片可以使用如下程式碼:
[CSS] 純文字檢視 複製程式碼div{ width:100px; height:100px; background:url(images/small.jpg); }
上面的圖片路徑就是相對於當前css程式碼所在頁面的路徑。
二.引入外部樣式表:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <link href="css/style.css" type="text/css" rel="stylesheet"/> <title>螞蟻部落</title> </head> <body> <div></div> </body> </html>
以上程式碼是引入的外部樣式表,那麼給div設定背景圖片的時候,應該如何使用路徑,很多朋友可能既然css程式碼已經引入當前頁面了,那麼圖片的路徑也是相對於當前頁面的路徑,那麼style.css中的程式碼如下:
[CSS] 純文字檢視 複製程式碼div{ width:100px; height:100px; background:url(images/small.jpg); }
以上程式碼是錯誤的,其實正確的相對路徑應該是相對於css檔案的,程式碼如下:
[CSS] 純文字檢視 複製程式碼div{ width:100px; height:100px; background:url(../images/small.jpg); }
從以上兩種情況可以看出,資源的路徑是相對於css程式碼所在的位置的。
相關文章
- 好程式設計師web前端分享絕對路徑與相對路徑的引用程式設計師Web前端
- 好程式設計師分享html圖片絕對路徑改相對路徑程式設計師HTML
- 好程式設計師web分享圖片標籤、絕對路徑和相對路徑程式設計師Web
- html中想把圖片絕對路徑 改成相對路徑怎麼操作?HTML
- js程式碼中的檔案的引用相對路徑簡單介紹JS
- HTML絕對路徑與相對路徑HTML
- 相對路徑轉換為絕對路徑的程式碼例項
- vue cli 關於使用絕對路徑引用圖片的問題Vue
- HTML中相對路徑的方式引用檔案HTML
- 深入解析Java絕對路徑與相對路徑Java
- 檔案的相對路徑和絕對路徑以及根相對路徑
- web專案絕對路徑與相對路徑的問題Web
- Webpack 中 css import 使用 alias 相對路徑WebCSSImport
- iOS開發:相對路徑與相對工程名iOS
- Xcode外掛路徑、快取路徑、圖片壓縮工具路徑、程式碼片段路徑、symbolicatecrash路徑XCode快取Symbol
- 絕對路徑和相對路徑的區別,
- 絕對路徑和相對路徑的區別
- Qt的相對路徑轉為絕對路徑QT
- html中的路徑的介紹:絕對路徑和相對路徑HTML
- css檔案與資源路徑相關CSS
- 檔案絕對路徑和相對路徑
- Jsp相對路徑和絕對路徑JS
- Linux檔案的路徑定位-相對路徑和絕對路徑Linux
- css中圖片的四種地址引用CSS
- javascript將相對路徑修改為絕對路徑JavaScript
- 05_Linux相對路徑和絕對路徑Linux
- Javascript 將圖片的絕對路徑轉換為base64編碼JavaScript
- Webpack 中css 如何 import 使用 alias別名 相對路徑WebCSSImport
- Java工程路徑及相對路徑(轉載)Java
- javaweb相對路徑file使用JavaWeb
- CSS設定背景圖片程式碼CSS
- JSP 和 Servlet 中的絕對路徑和相對路徑問題JSServlet
- 直播網站原始碼,上傳圖片到專案目錄並將相對路徑儲存到資料庫網站原始碼資料庫
- python如何將相對路徑轉換為絕對路徑?Python
- 使用Javascript將相對路徑地址轉換為絕對路徑JavaScript
- 關於函式由絕對路徑轉為相對路徑函式
- jQuery如何獲得圖片的路徑jQuery
- 最最基礎的乾貨:Linux中的絕對路徑和相對路徑Linux