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

Question

我正在尝试将放大镜作为输入元素的背景.放大镜图标是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>

谢谢你的帮助.

Answer 1

你宣布background-position了两次.在background短手资产结束时的第一个,在下一行的第二个.解决方案:拆分所有单个background规则(另外,0 -24px是正确的值):

#search-form input[type="text"] {
    background-image: url('http://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;
}

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