在網頁設計中，圖片的運用可以增加頁面的美觀度，也有利于更好地展現網頁的內容。在CSS中，優雅地處理圖片可以提高頁面的性能和用戶體驗。本文將介紹CSS中如何使用圖片。

在CSS中，使用圖片需要通過屬性background-image、content、list-style-image、cursor等來實現。其中，background-image是最常用的屬性。

.example {
background-image: url('example.png');
}

可以看到，background-image屬性的值是圖片的URL。當然，這里的URL可以是相對路徑也可以是絕對路徑。此外，在使用background-image屬性時，可以設置圖片的位置、重復、尺寸等屬性。

.example {
background-image: url('example.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

除了background-image，CSS還有其他幾個與圖片相關的屬性。例如，content屬性可以在頁面中插入圖片和其他內容。

.example:before {
content: url('example.png');
}

上述代碼中，:before選擇器用于在元素的內容前插入內容，而這里的內容是圖片。類似地，list-style-image屬性可以為列表項添加圖片。

ul li {
list-style-image: url('example.png');
}

最后還有cursor屬性，它可以改變鼠標的樣式。除了默認的箭頭樣式，可以將鼠標變成放大鏡、手指等形狀。其中，也可以使用圖片作為鼠標樣式。

.example {
cursor: url('example.png');
}

上述代碼中，鼠標在頁面上移動時，將會呈現example.png圖片作為樣式。

CSS中使用圖片的最后一個問題是圖片的格式。不同的圖片格式有不同的優缺點。例如，JPEG適合保存大的、具有漸變色的圖片，而PNG可以為透明圖片和圖形圖像提供更好的支持。在使用圖片時，需要根據具體情況選擇最合適的圖片格式。

本文介紹了在CSS中使用圖片的方法，以及使用圖片的一些技巧和注意事項。在實現網頁設計時，靈活運用圖片可以增加頁面的美觀性和用戶體驗，更好地展示頁面的內容。