Повторение раздела изображения в CSS

Question

Я хочу взять фрагмент изображения, например середину изображения, и повторить только этот раздел на фоне div. Возможно ли это хотя бы отдаленно? Я полагаю, что я мог бы сделать это в JavaScript, но это было бы грязно.

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

Кто-нибудь знает, как я мог бы сделать это в CSS?

Answer 1

Вопреки тому, что некоторые здесь заявили, в зависимости от изображения, вы МОЖЕТЕ сделать это с помощью CSS / Sprites. Но это не всегда так. Это сводится к изображению, которое вы хотите повторить, его высоте / ширине относительно спрайта, на котором он существует, направлению, в котором вы хотите его повторить, и размеру контейнера, в котором вы хотите его повторить.

_{(источник: sampsonresume.com )}

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

Answer 2

Вы можете достичь этого эффекта, используя свойство CSS3 border-image.

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

Steve

Answer 3

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

Answer 4

Если вы хотите кросс-браузерное решение, то в настоящее время вам не повезло, особенно если вы хотите CSS-решение.

Единственный способ сделать это с помощью JavaScript - использовать элемент canvas, но это не поддерживается IE.