Экстраполировать фрагмент фона в css из спрайта

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


css sprite
person A_funs    schedule 29.12.2012    source источник
comment
Мне действительно интересно, для чего вы можете использовать фрагмент размером 1x1px, для которого вы не можете использовать цвет CSS. Я собираюсь попытаться подражать этой идее.   -  person sheriffderek    schedule 15.01.2013
comment
Я перепробовал кучу вещей с новыми свойствами фона, но ничего не вышло.   -  person sheriffderek    schedule 16.01.2013

Ответы (3)


arrow_upward
1
arrow_downward

Похоже, вы используете изображения шириной 1 пиксель для градиентов. Я предполагаю, что вы хотите повторить изображение только в одном направлении, а не в обоих. Если это так, вы можете сделать спрайт из изображений шириной 1 пиксель. Хитрость заключается в том, чтобы расположить ваш спрайт в соответствии с направлениями, в которых вы будете повторять изображения. Также обратите внимание на то, будете ли вы располагать их справа или снизу, например, если ваш градиент должен располагаться внизу контейнера, вы, вероятно, захотите расположить этот градиент внизу вашего спрайта. Если все ваши изображения повторяются по горизонтали, вы можете выложить их одним файлом, положив одно поверх другого. Мне нравится иметь некоторую прозрачность между изображениями, чтобы выровнять их по линиям сетки или оставить достаточно места, чтобы другие изображения не отображались.

В большинстве браузеров, кроме старого IE, вы можете создавать градиенты с помощью CSS без использования каких-либо изображений. Для старых версий IE вам придется использовать изображения.

person Miriam Salzer    schedule 16.02.2013

arrow_upward
1
arrow_downward

Если я правильно вас понял, ответ Мириам - правильный ответ.

Я просто подробно расскажу об ответе Мириам на нескольких примерах.

Вот CSS-спрайт градиентов для использования кнопок.

CSS Sprite градиентов

Используйте CSS background-position, чтобы определить конкретный градиент, который вы хотите использовать для определенных кнопок.

Однако градиенты с изображениями устарели. Для большинства градиентов вы можете просто использовать фильтры CSS и IE для достижения того же результата. С помощью CSS можно создать даже довольно сложные градиенты (IE будет использовать стандартный градиент «один цвет к одному цвету». И если вы действительно хотите, чтобы у этого пользователя IE8 было то же представление, что и в современных браузерах, вы все равно можете использовать изображение в качестве запасного варианта). .

Вот отличный инструмент (похожий на фотошоп) для создания градиентов и простого копирования/вставки сгенерированного им кода: http://www.colorzilla.com/gradient-editor/

person Volzy    schedule 21.02.2013

arrow_upward
0
arrow_downward

Единственный способ, которым я могу представить, где это было бы возможно, - это "стек SVG". Основная идея заключается в том, что каждый спрайт находится на другом «слое» на одной и той же «плитке», но они скрыты/отображены с помощью небольшого количества CSS в файле SVG:

<style>
  svg .icon { display: none }
  svg .icon:target { display: inline } 
</style>

Более подробное объяснение здесь: http://simurai.com/post/20251013889/svg-stacks< /а>

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

.element {
    background: url(myBG.png);
    background-image: -moz-linear-gradient(transparent, transparent), url(spriteStack.svg#myBG);
}

Как только другие браузеры согласятся с поддержкой фрагментов на фоне SVG, вы сможете добавить для них соответствующий линейный градиент с префиксом.

Поскольку ваши изображения bg маленькие, я рекомендую использовать URI данных. Они выглядят примерно так:

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAADU5ErkJggg==");

Если вы планируете обновлять это изображение с любой частотой, Compass (расширение Sass) может сгенерировать их автоматически вместе с минимизацией вашего CSS (см.: http://compass-style.org/reference/compass/helpers/inline-data/#inline-image).

person cimmanon    schedule 30.12.2012