Как использовать CSS спрайты с текстовым полем? - PullRequest
Новая
       3

Как использовать CSS спрайты с текстовым полем?

3 голосов
/ 25 июня 2011

Я пытаюсь использовать спрайты CSS в текстовом поле.Размеры изображения составляют 200x50 пикселей, и я хочу, чтобы отображалась только часть изображения, скажем, из (25px, 25px) (x, y cordinates) с высотой 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="">

Я пытался использовать свойства background-position и background-image, но в моем случае это не сработало.

Как я могу это сделать?Какие свойства или теги я должен использовать, чтобы это работало?пожалуйста, ведите меня ...

спасибо заранее ..

Ответы [ 4 ]

1 голос
/ 25 июня 2011

Я не уверен, что вообще есть действительный <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>
0 голосов
/ 25 июня 2011

Вы имеете в виду что-то вроде этого демонстрационная скрипка ?

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.

0 голосов
/ 25 июня 2011

Вы вообще не видите изображение или что-то еще?

В моем спрайте я использую позицию, подобную этой: 

   .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;
}
0 голосов
/ 25 июня 2011

Почему бы не применить класс с фоновым классом и с прозрачным фоном и без границ внутри?

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