定位背景图像的形式与CSS精灵的元素

Question

我想获得一个放大镜作为我的输入元素的背景。放大镜图标是一个CSS Sprite的一部分，看起来像这样：

放置它，我用这些属性：

#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; 
} 

现在你可以面对你的设计，真正的问题：其他的精灵会在输入可见区域之间没有足够的空间。