使用CSS sprites在表单元素上定位背景图像 [英] Positioning background image on form element with CSS sprites

问题描述

我想要一个放大镜作为我的输入元素的背景。放大镜图标是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; / code>

但不起作用。

'm guessing it not，this is my form markup：

 < form action =/ searchmethod =get id =search-form> 
< input type =textplaceholder =Search ...name =s> 
< / form>感谢您的帮助。
解决方案
您声明了 background-position 两次。第一个在后台 short-hand属性的末尾，第二个在下一行。 解决方案：拆分所有单个背景规则（如（另外， 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; 
} 
  
现在你可以面对设计中的真正问题：其他精灵在输入区域中可见，如果它们之间没有足够的空间。
 
I am trying to get a magnifying glass as the background for my input element. The magnifying glass icon is part of a CSS sprite that looks like this:



To position it, I've used these properties:
#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;
}
But the background still appears at the top of the input box rather than aligned in the vertical middle and to the left. I've also tried doing:

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

but that doesn't work either.

If it matters, although I'm guessing it doesn't, here's my form markup:
<form action="/search" method="get" id="search-form">
    <input type="text" placeholder="Search..." name="s">
</form>
Thanks for any help.
解决方案
You declared background-position two times. The first one at the end of the background short-hand property, the second one on the next line. Solution: Split all single background rules like this (additionally, 0 -24px is the correct value):
#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;
}
And now you can face the real problem with your design: other sprites will be visible in the input area if there are no sufficient space between them.

                        
这篇关于使用CSS sprites在表单元素上定位背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！