CSS表單提示設置為圖片

input[type=text]:focus + .tooltip {
display: block;
}
.tooltip {
display: none;
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
}
.tooltip img {
display: block;
max-width: 200px;
}

在設計網站表單的過程中，為輸入框添加提示語可以提高用戶的體驗，使用戶更加輕松地操作。但是，傳統的文字提示可能會顯得單調和普通，有時還不夠生動有趣。為了更好的用戶體驗，可以把表單提示設置為圖片，從而增加網站的互動性和美觀度。

要將表單提示設置為圖片，需要使用CSS。首先，我們需要使用CSS選擇器選擇需要添加圖片提示的input元素，這里使用input[type=text]選擇器，表示選擇類型為text的input元素。然后，在input的偽類:focus后面添加+ .tooltip，表示當input元素獲取焦點后，與該元素同級的后續元素.tooltip顯示。

接下來，針對.tooltip元素的樣式，設置display為none，表示元素不可見。然后，設置position為absolute，top為20px、left為50%，這樣.tooltip元素就會相對于其最近的非靜態定位祖先元素（如body）左上角定位，并使其水平居中。

最后，為了讓.tooltip更加生動有趣，可以在其中放置一張圖片。設置img元素的display為block，表示其與前后的元素在頁面上占據新的一行，再給圖片設置一個合適的max-width，以便它不超過其父元素的寬度。

通過以上CSS樣式設置，我們就可以將表單提示設置為圖片了。圖片可以是app圖標、問號標志等等，根據不同的需求進行選擇和設計。如此一來，網站的表單設計就會更加生動有趣，增加用戶的參與度。