編碼的世界 / 優質文選 / 生涯

css樣式表裏面引用background-image時，url路徑錯誤原因及解決方法

2022年3月20日
-   



css樣式表中background-image要引入image文件夾下的portrait.jpg圖片，
正確的寫法是：
background-image:url('../image/portrait.jpg');

誤區：
一直以為，當在html中引用外部樣式表後，那麼在樣式表文件中定義的樣式就相當於在html頭文件中定義的樣式了，相對路徑以html為參考。但事實是，它依然存放在定義的文件中被一起下載到客戶端。在定義url時，如果是絕對地址沒什麼問題，如果是相對地址，那麼，一定要相對css/style.css所在的路徑，而不必考慮即將引用它的html文件的路徑。解決方法
1.相對路徑（相對於html） 在html的頭部寫樣式，就可以相對於html文件的圖片的路徑了
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .portrait {





 background-image: url('./static/image/portrait.jpg')
 }
 </style>
</head>

2.相對路徑（外部引入css樣式表，相對於style.css引入）
background-image:url('../image/portrait.jpg');

3.絕對路徑（比如f:/resume/static/image/portrait.jpg(這種方式理論上是可以的，但一般不采用）

熱門文章