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

Я пытаюсь использовать спрайты CSS в текстовом поле. Размеры изображения составляют 200x50 пикселей, и я хочу отображать только часть изображения, скажем, из (25 пикселей, 25 пикселей) (координаты x, y) с высотой 30 пикселей и шириной 50 пикселей.

.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, но в моем случае это не сработало.

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

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


html css css-sprites
person Vinay    schedule 25.06.2011    source источник
comment
У вас это почти правильно (хотя вы захотите добавить background-repeat: no-repeat). Какая часть не работает для вас?   -  person DA.    schedule 25.06.2011
comment
Здесь тоже работает, в каком браузере вы тестировали? FF5 и Chrome 12 работают нормально.   -  person Pasman    schedule 25.06.2011
comment
приведенный выше код меняет высоту текстового поля на 30 пикселей и ширину на 50 пикселей. Я хочу показать изображение вышеуказанного размера в текстовом поле с координатой 25px, 25px в images/ff.jpg.   -  person Vinay    schedule 25.06.2011

Ответы (4)


arrow_upward
1
arrow_downward

Я не уверен, что существует действительное <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>
person Dennis Kreminsky    schedule 25.06.2011
comment
-1 Извините, не работает. Это ограничивает размер самого элемента textarea, а не только размер фонового изображения. - person NGLN; 25.06.2011
comment
В вопросе нет понятия размера контейнера. Правильно заданный вопрос - это 50% правильного ответа. Вы не можете ограничить размер фона, кроме создания контейнера определенного размера. - person Dennis Kreminsky; 25.06.2011
comment
Вы могли бы подумать, что предполагается, что изображение не меняет контейнер, хотя... извините, если этот комментарий опоздал на два года.. - person sksallaj; 30.01.2014

arrow_upward
0
arrow_downward

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

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>
person Pasman    schedule 25.06.2011

arrow_upward
0
arrow_downward

Вы имеете в виду что-то вроде этой демо-скрипки?

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.

person NGLN    schedule 25.06.2011

arrow_upward
-1
arrow_downward

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

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

   .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;
}
person kheya    schedule 25.06.2011