寫CSS圖片路徑的方法

在CSS中，圖片路徑的寫法有一定的規(guī)范，正確的路徑寫法可以讓圖片正確地顯示出來，下面介紹幾種常見的CSS圖片路徑寫法。

1、***路徑

***路徑是指從網(wǎng)站根目錄（通常是“/”或“http://html4.cn/”）開始的路徑，在CSS中，可以使用“/”或“http://html4.cn/”來指定圖片的路徑。

img {
  background-image: url("/images/image.png");
}

或者

img {
  background-image: url("http://html4.cn/images/image.png");
}

2、相對(duì)路徑

相對(duì)路徑是指相對(duì)于當(dāng)前CSS文件所在位置的路徑，在CSS中，可以使用“./”或“../”來指定圖片的路徑。

img {
  background-image: url("./images/image.png");
}

或者

img {
  background-image: url("../images/image.png");
}

3、引用其他網(wǎng)站的圖片

如果圖片不在當(dāng)前網(wǎng)站，而是引用其他網(wǎng)站的圖片，可以使用“@import”語(yǔ)法來引入其他網(wǎng)站的樣式表，并在樣式表中指定圖片路徑。

@import url("http://html4.cn/styles/styles.css");

在styles.css中指定圖片路徑：

img {
  background-image: url("http://html4.cn/images/image.png");
}

注意，在引用其他網(wǎng)站的樣式表時(shí)，需要確保樣式表所在的網(wǎng)站允許跨域引用，否則，瀏覽器可能會(huì)阻止樣式的加載。