項目列表是網站中常見的一種頁面展示形式，而使用CSS圖片來做項目列表，可以讓頁面更加美觀、有趣。下面我們來看看如何使用CSS圖片制作項目列表。

.project-list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.project{
position: relative;
width: 300px;
height: 200px;
margin-bottom: 30px;
background-size: cover;
background-position: center;
border-radius: 5px;
overflow: hidden;
}
.project:hover .project-title{
transform: translateY(0);
}
.project-title{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background-color: rgba(0,0,0,0.8);
color: #fff;
opacity: 0;
transform: translateY(100%);
transition: all .3s ease;
}
.project:nth-child(1){
background-image: url("project-1.png");
}
.project:nth-child(2){
background-image: url("project-2.png");
}
.project:nth-child(3){
background-image: url("project-3.png");
}

上面是以上代碼，我們首先定義了一個項目列表的容器，使用了彈性布局，讓項目自動換行，并且在項目之間添加了一些空白。然后我們定義一個項目的樣式，給它設定寬度、高度、邊距、圓角等基本屬性。項目的背景圖使用CSS屬性background-image來設置，同時設置背景圖片的尺寸和位置。項目標題使用絕對定位相對于項目底部，設置背景色、文字顏色和透明度，并且初始時不可見。通過hover狀態來控制標題的顯示和隱藏。

最后，我們給每一項添加一張對應的圖片，即可完成CSS圖片做項目列表的效果。