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>

TextBox背景中的图像精灵

1 个答案: