使用 CSS sprites 在表单元素上定位背景图像

我正在尝试使用放大镜作为输入元素的背景。放大镜图标是 CSS 精灵的一部分，如下所示：

为了定位它，我使用了这些属性：

#search-form input[type="text"] {
    background: url('../images/icons.png') no-repeat left center;
    background-position: 0px -30px;
    border: 1px solid #a9e2ff;
    padding: 3px;
    width: 200px;
    font-size: 1em;
    padding-left: 20px;
}

但背景仍然出现在输入框的顶部，而不是垂直中间和左侧对齐。我也尝试过这样做：

background: url('../images/icons.png') no-repeat left middle;

但这也行不通。

如果它很重要，尽管我猜它不重要，这是我的表单标记：

<form action="/search" method="get" id="search-form">
    <input type="text" placeholder="Search..." name="s">
</form>

谢谢你的帮助。

你宣布background-position两次。第一个在最后background简写属性，下一行的第二个。Solution: 拆分所有单个background像这样的规则（此外，0 -24px是正确的值）:

#search-form input[type="text"] {
    background-image: url('https://i.stack.imgur.com/MFpLm.png');
    background-repeat: no-repeat;
    background-position: 0 -24px;
    border: 1px solid #a9e2ff;
    padding: 3px;
    width: 200px;
    font-size: 1em;
    padding-left: 20px;
}

现在您可以面对设计中的真正问题：如果其他精灵之间没有足够的空间，它们将在输入区域中可见。