Question

这是我的代码：

＆＃13;

input{
  background: url("https://i.stack.imgur.com/dXML2.png") no-repeat -30px -20px;
  height: 30px;
  width: 100%;
}

＆＃13;

<input type="text" />

＆＃13;

我想把那个放大镜放一点。我的意思是，我想把它垂直放在输入的中间。

我可以这样做：

＆＃13;

    input{
      background: url("https://i.stack.imgur.com/dXML2.png") no-repeat -30px -15px;
      height: 30px;
      width: 100%;
    }

＆＃13;

<input type = "text" />

＆＃13;

但是你看到结束符号会变得明显。无论如何，我怎样才能改变放大镜的位置而不显示同一图像中的其他符号？

Answer 1

您可以将现有图片与background-clip一起使用。要执行此操作，您需要更改input样式，但只需稍微更改一下。您目前有一个height: 30px，需要使用height: 20px更改为padding: 5px 0;，以便在5px的顶部和底部为输入提供填充。这意味着输入高度保持30px，并根据需要显示图标。

您需要使用text-indent来偏移文本，这样它也不会与图标重叠。

input{
      background-image: url("https://i.stack.imgur.com/dXML2.png");
      background-repeat: no-repeat;
      background-position: -30px -15px;
      background-clip: content-box;
      height: 20px;
      padding: 5px 0;
      width: 100%;
      text-indent: 25px;
    }

<input type = "text" />

Answer 2

将background-clip属性设置为content-box。您可能还需要调整填充：

input{
  background: url("https://i.stack.imgur.com/dXML2.png") no-repeat -30px -15px;
  height: 18px;
  width: 100%;
  background-clip: content-box;
  padding: 6px 2px;
}

工作样本：https://jsfiddle.net/18qf4eno/

Answer 3

这是另一个不涉及剪切或填充输入的选项。用div包装输入并使用::before psuedo类来定位它。

input {
  height: 30px;
  width: 100%;
}

.input-wrap::before {
  content: '';
  position: absolute;
  background: url("https://i.stack.imgur.com/dXML2.png") no-repeat -30px -20px;
  width: 16px;
  height: 16px;
  top: 15px;
  left: 15px;
}

<div class="input-wrap">
  <input type="text" />
</div>

Answer 4

你走了！您可以使用background-position：

来控制它

＆＃13;

#button{
   background-color: #3572b0;
   color: #fff;
   border-radius: 5px;
   border: none;
   padding: 10px;
   margin-top: 10px;
   margin-bottom: 5px;
   font-weight: bold;
   }
#button:hover{
   background-color: #3b7fc4;
   cursor: pointer;
   
}
#field{
   color: #fff;
   border: none;
   border-radius: 3px;
   box-shadow: none;
   background: #1a4067;
   height: 30px;
   width: 170px;
   margin-top: 0px;
   margin-right: 5px;
   margin-left: 5px;
   line-height: 1.42857142857143;
   vertical-align: baseline;
   box-sizing: border-box;
   font-size: "inherit";
   padding: 2px 30px 2px 10px;
   background-image: url('https://i.stack.imgur.com/dXML2.png');
   background-repeat: no-repeat;
   background-position: -25px -15px; 
   
}
::-webkit-input-placeholder {
   color: #bbbbbb;
}
*:focus {outline:none !important}

＆＃13;

<FORM NAME = "form1" >
   <span class="fa fa-search"></span>
      <center><input id="field" type="text" name="text1" value="" autocomplete="off" ></center><br/>
      <center><input id ="button" type="submit" value="Search" ></center>
</FORM>

＆＃13;

如何在背景图像中隐藏其他精灵？

4 个答案: