文本框背景中的图像精灵

Question

我想在输入文本框的背景中显示图像。图像应放置在输入文本框的最右侧中心部分。可以通过以下代码轻松完成：

    <input type="text" class="card" size=20 />

css 将是：

    .card{
     background:url('image.png') no-repeat right center;
       }

我面临的问题是图像是一个精灵，由 3 个图像组成。我想在背景位置 -34px 0 显示一个，它的宽度是 23px;

如何用 css 指定背景位置和大小？

提前致谢！！

Answer 1

如果精灵很紧，你不能在CSS中剪裁背景，其他选择是在输入框旁边添加一个跨度并正确设置精灵的背景和高度和宽度，然后使用背景位置获取正确的图像，一旦完成，您就可以使用负左值定位跨度，将其拉到文本框的左侧，希望这会有所帮助:)

<div style="position:relative; display:inline-block;">
  <input type="text" /><span style="position:absolute; right:0px; background:#FF0000">O</span>
</div>