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图标、问号标志等等，根据不同的需求进行选择和设计。如此一来，网站的表单设计就会更加生动有趣，增加用户的参与度。