Использование изображения Sprite с вводом

Question

Мне интересно, возможно ли использовать спрайт, где каждое изображение имеет размер 16 x 16, в качестве фона для входного текста / текстовой области, которая составляет около 300 пикселей. Кто-нибудь знает способ или я должен просто нарезать их на разные фоны.

Answer 1

Ваши потребности могут быть отличным кандидатом на Диагональные CSS-спрайты .

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

Почему диагональный спрайт?

С помощью спрайта, построенного по диагонали, нет компонентов ниже или справа от компонента, который вы показываете. Это позволяет элементу, использующему спрайт, быть настолько широкими или такими же высокими, насколько это необходимо, не беспокоясь о разоблачении следующего компонента.

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

Answer 2

Да, конечно, можно использовать спрайт на input, но я настоятельно рекомендую против этого, если вы заботитесь о совместимости браузера.Например, фоновые изображения на элементах input в Internet Explorer 7 не остаются в фиксированном положении, поэтому при вводе фоновое изображение будет двигаться.Если вы используете горизонтальный спрайт, это может быть особенно проблематично.Я бы предложил поместить input в элемент контейнера, который имеет фон.И для этого убедитесь, что есть дополнительное пространство вокруг каждого изображения для несоответствий браузера и устройства с помощью spacing / heights / margins / padding элемента формы.Использование таблицы стилей сброса CSS было бы полезно с самого начала.И проверить и протестировать снова!

Answer 3

Вы можете попытаться сделать это так:

Answer 4

Ну, вы могли бы просто поместить каждый спрайт в 300px на листе спрайтов, чтобы в окне можно было видеть только один спрайт.

Set:

background-repeat: no-repeat;

А для textbox2 сделать:

background-position: -300px 0;

Или что-то.