定位背景圖像的形式與CSS精靈的元素

我想獲得一個放大鏡作爲我的輸入元素的背景。放大鏡圖標是一個CSS Sprite的一部分，看起來像這樣：定位背景圖像的形式與CSS精靈的元素

enter image description here

放置它，我用這些屬性：

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

感謝您的幫助。

來源

2012-01-27 James Dawson

您聲明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; 
}

現在你可以面對你的設計，真正的問題：其他的精靈會在輸入可見區域之間沒有足夠的空間。

來源

2012-01-27 20:56:54

好的catch/answer！ – 2012-01-28 02:22:10

謝謝！我認爲有一種方法可以做到這一點，而不會在我的精靈之間增加額外的空間，但顯然不是。 :) – 2012-01-28 14:53:02

@MartinHoe通常你只需要將精靈包裝在一個與圖標大小完全一樣大的盒子中。不幸的是，你不能這樣做，因爲你在輸入框中不能有塊元素。 – 2012-01-28 14:59:22

定位背景圖像的形式與CSS精靈的元素

回答

相關問題