在設計網頁時，常常會遇到需要一張圖片上下不間斷滑動的情況，這種滑動看起來很炫酷，讓網頁具有一定的動態感。本文將介紹如何使用 CSS 實現圖片上下不間斷滑動效果。

/* HTML 代碼 */
<div class="banner">
<img src="image/banner.jpg" alt="banner">
</div>
/* CSS 代碼 */
.banner {
height: 200px;
overflow: hidden;
position: relative;
}
.banner img {
position: absolute;
top: 0;
animation: slide infinite 8s linear;
}
@keyframes slide {
0% {
top: 0;
}
100% {
top: -100%;
}
}

首先，在 HTML 里創建一個帶有背景圖片的 div 容器，并且設置他的高度，使用 overflow 隱藏圖片溢出部分。然后，在 CSS 文件里設置圖片的絕對位置，使其呈現在容器的頂部。接著，使用 CSS 動畫屬性 animation 和關鍵幀 @keyframes，讓圖片頂部逐漸向上移動，從而實現圖片的無限滑動效果。

具體來說，先在 CSS 中設置圖片的初始位置，然后在 @keyframes 中設置圖片的終止位置。在這個例子中，設置圖片由初始位置移動到最終位置的時間是 8 秒，移動的速度是線性的，因此可以看到圖片一直從上往下滑動。這里的尺寸和時間可以根據具體需求進行調整。

總的來說，使用 CSS 實現圖片上下不間斷滑動效果是非常簡單的。只需要創建一個外部容器，設置圖片的絕對位置，然后使用 CSS 動畫屬性 animation 和關鍵幀 @keyframes 進行設置即可。這種無限滑動效果可以讓網頁更有動態感，從而提高用戶的閱讀體驗。