作為Web開發者，我們經常需要在網站中使用圖片來增強用戶體驗。在CSS中，我們可以使用background-image屬性或者content屬性插入圖片。本文將詳細介紹在CSS中如何插入圖片。 使用background-image屬性插入圖片 使用background-image屬性可以為元素設置背景圖片。我們來看一個例子：

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

上面的代碼將給所有class為example的元素設置背景圖片為example.png。需要注意的是，url()中的路徑應該是相對于CSS文件的位置。如果圖片和CSS文件在同一目錄下，可以直接使用文件名作為路徑，如上例中的example.png。如果圖片和CSS文件在不同目錄下，需要使用相對路徑或者絕對路徑指定圖片路徑。 我們還可以使用CSS中的background-position屬性和background-size屬性來控制背景圖片的位置和大小。例如：

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

上面的代碼將把背景圖片居中顯示，并且調整圖片大小以完全覆蓋元素。 使用content屬性插入圖片 另一種插入圖片的方法是使用content屬性。content屬性可以為:before和:after偽元素插入內容。我們來看一個例子：

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

上面的代碼將在class為example的元素前插入一個背景圖片。需要注意的是，使用content插入圖片時，URL必須用引號括起來。 我們還可以使用CSS中的width屬性和height屬性來調整插入的圖片的大小。例如：

.example:before {
content: url('example.png');
width: 100px;
height: 100px;
}

上面的代碼將插入一個寬度為100像素，高度為100像素的圖片。 總結 在CSS中插入圖片可以使用background-image屬性和content屬性。使用background-image屬性可以為元素設置背景圖片，通過調整background-position屬性和background-size屬性可以控制圖片的位置和大小。使用content屬性可以為:before和:after偽元素插入圖片，通過調整width屬性和height屬性可以控制圖片的大小。希望本文對你了解如何在CSS中插入圖片有所幫助。