Спрайт изображения в фоновом режиме TextBox

Я хочу отобразить изображение на фоне текстового поля ввода. Изображение должно быть помещено в самую правую центральную часть текстового поля ввода. Это можно легко сделать с помощью следующего кода:

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

CSS будет:

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

Проблема, с которой я сталкиваюсь, заключается в том, что изображение представляет собой спрайт и состоит из 3 изображений. Я хочу отобразить одно в фоновом положении -34px 0, а его ширина - 23px;

Как указать положение и размер фона с помощью css?

Заранее спасибо!!


input background background-image shorthand css-sprites
person hkasera    schedule 08.05.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы не можете обрезать фон в CSS, если спрайт плотный, другой вариант - добавить диапазон рядом с полем ввода и правильно установить фон для спрайта, а также высоту и ширину, а затем использовать положение фона, чтобы получить правильное изображение , как только это будет сделано, вы можете расположить диапазон, используя минус левое значение, чтобы переместить его влево над текстовым полем, надеюсь, это поможет :)

<div style="position:relative; display:inline-block;">
  <input type="text" /><span style="position:absolute; right:0px; background:#FF0000">O</span>
</div>
person Bloafer    schedule 08.05.2012
comment
Я делаю эту страницу для мобильных веб-сайтов. Будет ли позиционирование диапазона работать на всех размерах экрана? - person hkasera; 08.05.2012
comment
Да, если ваша оболочка расположена правильно, я добавил для вас тест, имейте в виду, что атрибут отображения в <div> IE потребует вместо этого display:inline - person Bloafer; 08.05.2012