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

Question

以下是我的代码：

input{
  background: url("https://istack.dev59.com/dXML2.webp") no-repeat -30px -20px;
  height: 30px;
  width: 100%;
}

<input type="text" />

我希望将放大镜下移一点，也就是垂直居中在输入框中间。

我可以像这样实现：

    input{
      background: url("https://istack.dev59.com/dXML2.webp") no-repeat -30px -15px;
      height: 30px;
      width: 100%;
    }

<input type = "text" />

但是，正如您所看到的，关闭符号将变得明显。无论如何，我如何只更改放大镜的位置，而不显示其他都在同一图像中的符号？

- stack

---

为什么不编辑图片并在图片之间留更多空间？它们看起来非常靠近。 - Harry

为什么不使用另一张图片，或者至少编辑图片以允许更多的空间？ - James

@Harry 我猜是因为这是一个图片精灵。 - DavidG

@DavidG：是的，但它仍然可以进行编辑以获得更多的空间，对吗？还是我漏掉了什么？我没有看到为什么不能编辑该图像。这很可能是此情况的最简单解决方案。 - Harry

@Harry，我无法更改图像，因为这会导致所有其他符号都被破坏，我需要设置它们的新坐标。 - stack

@Harry 更多空间只意味着更大的图像，这在某种程度上削弱了精灵的优点。不过，我同意这是最简单的解决方案。 - DavidG

Answer 1

您可以使用现有的图像与background-clip。为此，您需要更改input样式，但仅略微更改即可。您当前具有height: 30px，需要更改为height: 20px，并使用padding: 5px 0;在顶部和底部给输入框添加5px的填充。这将意味着输入保持30px高，并按您想要的方式显示图标。

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

input{
      background-image: url("https://istack.dev59.com/dXML2.webp");
      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" />

- Brett DeWoody

Answer 2

这里有另一种选项，不需要剪切或填充你的输入。用一个 div 包装输入，并使用 ::before 伪类进行定位。

input {
  height: 30px;
  width: 100%;
}

.input-wrap::before {
  content: '';
  position: absolute;
  background: url("https://istack.dev59.com/dXML2.webp") no-repeat -30px -20px;
  width: 16px;
  height: 16px;
  top: 15px;
  left: 15px;
}

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

- DavidG

Answer 3

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

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

工作示例：https://jsfiddle.net/18qf4eno/

- Matt Spinks

Answer 4

就是这样！ 您可以使用background-position来控制它：

#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://istack.dev59.com/dXML2.webp');
   background-repeat: no-repeat;
   background-position: -25px -15px; 
   
}
::-webkit-input-placeholder {
   color: #bbbbbb;
}
*:focus {outline:none !important}

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

- Moses Davidowitz

---

这显然是从别处复制/粘贴的，有很多不必要的东西。你应该剔除重点来回答问题。其次，没有解释的代码转储是无用的。 - DavidG

我最近刚刚处理了这个问题，所以当我遇到这个问题时，我想分享我的工作。它确切地解决了问题。为什么不加些样式呢？ - Moses Davidowitz

看起来很不错，但要找到实际有用的代码，我现在得读50行代码。 - DavidG

此外，您的描述相当无用，尤其是因为 OP 已经在使用背景定位。 - DavidG

你说得对。我会处理它的。顺便说一句，我喜欢你的答案。 - Moses Davidowitz