Background | css url絕對路徑
Background-image的規則background-image作用是設定背景圖片,其撰寫方式像是這樣background-image:url("amos.png");背景圖片的設定,在不控制大小的情況下,預設就是原始圖片大小,且圖片僅會顯示在區塊的範圍內,也就是說當圖片太大張的時候,圖片將會發生裁切的情形。另外,當同時設定了background-color與background-image的時候,background-image將會蓋住background-color,background-image支援的值有以下幾種url()linear-gradient()radial-gradient()repeating-linear-gradient()repeating-radial-gradient()InitalInheritBac...
Background-image 的規則background-image作用是設定背景圖片,其撰寫方式像是這樣
background-image: url("amos.png");背景圖片的設定,在不控制大小的情況下,預設就是原始圖片大小,且圖片僅會顯示在區塊的範圍內,也就是說當圖片太大張的時候,圖片將會發生裁切的情形。另外,當同時設定了background-color與background-image的時候,background-image將會蓋住background-color,background-image支援的值有以下幾種
url( ) linear-gradient( ) radial-gradient( ) repeating-linear-gradient( ) repeating-radial-gradient() Inital Inherit Background-image 的 url背景圖片的url所要撰寫的是圖片檔案所在的位置,你可以使用絕對路徑與相對路徑,絕對路徑指的大概像是以世界為空間所指出的詳細位置,像是「太陽系地球台灣新竹縣可樂鄉網頁路87號」這樣,如果換成網路世界的話就是完整的網址了,就像「http://csscoke.com/wp-content/uploads/2015/07/special_album_done_small.jpg[1] 」這樣,可以看到網址到資料夾的名稱都寫得一清二楚的。另一種則是相對路徑,所謂的「相對」,就是「該段CSS background-image 所在檔案位置 」開始,前往「圖片位置」所要經過的整段路徑,首先先來看看以下網站架構
以上面所示的架構來看,如果「index.html」與「about.html」兩個網頁檔都連結了CSS資料夾中的「style.css」檔案,大概會像下方第六行這樣去連結
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...