javascript - 如何隐藏背景图像中的其他 Sprite ？

Question

这是我的代码:

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

<input type="text" />

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

我可以这样做:

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

<input type = "text" />

但是如您所见，结束符号将变得明显。无论如何，我怎样才能改变放大镜的位置而不显示所有都在同一图像中的其他符号？

Answer 1

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

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

input{
      background-image: url("/image/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" />