在現代網站設計中，使用背景圖已經是一個常見的做法了。而在 CSS3 中，我們有更多的方式來引用背景圖，讓網頁呈現出更加豐富的效果。 使用 CSS3 引用背景圖可以實現動態效果，比如鼠標滑過時背景圖片的位置或樣式改變，或者在頁面滾動時背景圖片的位置跟隨移動。下面我們來具體展示幾種實現方式。 首先，使用 CSS3 的 background-position 屬性可以改變背景圖片的位置。比如我們可以把背景圖片原來的位置向上移動 10 像素：

p {
background-image: url("background.png");
background-position: 0 -10px;
}

上邊的代碼會將 p 元素的背景圖片的位置向上移動 10 像素。 其次，我們可以使用 CSS3 的偽類 :hover 來實現鼠標滑過時背景圖片位置或樣式的改變。

p {
background-image: url("background.png");
background-position: 0 0;
}
p:hover {
background-position: 0 -10px;
}

上邊的代碼會在 p 元素上鼠標滑過時將背景圖片向上移動 10 像素。 最后，我們可以使用 CSS3 的 background-size 屬性來控制背景圖片的尺寸，在頁面滾動時實現背景圖片跟隨移動的效果。

p {
background-image: url("background.png");
background-position: 0 0;
background-size: cover;
background-attachment: fixed;
}

上邊的代碼會使 p 元素的背景圖片占滿整個元素，并在頁面滾動時背景圖片位置不發生改變。 綜上所述，使用 CSS3 引用背景圖可以實現很多動態效果，我們只需要靈活運用 CSS3 的屬性和偽類就能達到不同的效果。