Повторение части изображения в CSS

Question

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

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

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

Answer 1

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

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

Стив

Answer 2

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

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

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

Answer 3

Если вам нужно кроссбраузерное решение, то на данный момент вам не повезло, особенно если вам нужно CSS-решение.

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

Answer 4

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