Question

我正在尝试在文本框中使用CSS sprites。图像尺寸为200x50像素，我想只显示图像的一部分（25px，25px）（x，y坐标），高度为30px，宽度为50px。

.img_textbox
{
  background-image: url(images/ff.jpg);
  background-position: 25px 25px;
  background-repeat: no-repeat;
  height: 30px;
  width: 50px;
}

上述坐标由第三个值决定，因此根据文本框中的文字而有所不同。

<input type="textbox" name="type" class="img_textbox" value="">

我尝试使用背景位置和背景图像属性，但在我的情况下没有用。

我该怎么办？我应该使用哪些属性或标签来使其工作？请指导我......

提前感谢..

Answer 1

我不确定是否有效<input type="textbox">，您最好使用<textarea>。

的CSS：

textarea.img_textbox {
  background-image: url(images/ff.jpg);
  background-position: 25px 25px;
  height: 30px;
  width: 50px;
}

HTML：

<textarea class="img_textbox" cols="5" rows="3">
  // value
</textarea>

Answer 2

为什么没有应用背景类，并且透明背景并且里面没有边框？

的CSS：

.img_textbox_back
{
  background-image: url(images/ff.jpg);
  background-position: 25px 25px;
  background-repeat: no-repeat;
  height: 30px;
  width: 50px;
}

.img_textbox
{
   background-color:transparent;
}

HTML：

<div class="img_textbox_back">
    <input class="img_textbox" />
</div>

Answer 3

你的意思是demo fiddle吗？

HTML：

<span></span><input type="text" />

CSS：

span {
    background: url('images/ff.jpg') no-repeat 25px 25px;
    position: absolute;
    width: 75px;
    height: 55px;
    z-index: -1;
}
input {
    background: transparent;
}

请注意，范围内的文本框不，以确保正常流程包含（文本框的大小）。

当然，您必须为文本框指定高度以显示图像。或者你可以使用textarea元素。

Answer 4

您根本看不到图像？

在我的精灵中，我使用这样的位置：

   .sprt {background-image:url("<path>");background-repeat:no-repeat;}   
   .arrow{
      background-position:-25px -25px;
      width:50px;height:30px;
    }

然后我使用<span class="sprt arrow"></span>来显示箭头

注意此坐标前的' - '。

你介意试试吗？

textarea.img_textbox {
  background-image: url("images/ff.jpg");
  background-position: -25px -25px;
  height: 30px;
  width: 50px;
}

如何在文本框中使用CSS sprites？

4 个答案: