HTML + CSS如何将按钮作为文本框内的图像

<div class="input-container">
    <input type="text" class="input-with-button" placeholder="输入文本...">
    <button class="input-button">搜索</button>
</div>

.input-container {
    position: relative;
    display: inline-block;
}

.input-with-button {
    padding-right: 40px; /* 留出按钮的空间 */
}

.input-button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    background: url('path_to_your_image.png') no-repeat center center;
    background-size: contain;
    border: none;
    width: 30px; /* 图像宽度 */
    height: 30px; /* 图像高度 */
    cursor: pointer;
    outline: none; /* 移除默认轮廓 */
}