Рендеринг травы с использованием повторяющихся изображений в CSS

Question

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

В качестве конкретного примера рассмотрим это изображение:

Может ли кто-нибудь воссоздать это, используя срезы или квадраты небольших размеров (например, срезы шириной всего в несколько пикселей или высотой всего в несколько пикселей, если они были горизонтальными, или квадраты 5x5 или меньше)? Конечный продукт не обязательно должен быть точным совпадением с оригиналом, просто что-то похожее. Решение должно быть в состоянии создать поле травы, способное заполнить div любых необходимых размеров. Любое повторение в поле должно быть плавным, и его трудно обнаружить с первого взгляда (как в примере с занавесом по ссылке выше).

Спасибо за любую помощь.

Answer 1

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

Если у вас есть бесшовное изображение, просто используйте его в качестве фона в div и повторите его, используя свойство css-свойства background-repeat.

.your-div
{
background-image:url('seamless-pattern-image.png');
background-repeat:repeat;
} 

Answer 2

Если вы откроете свое изображение в PhotoShop, просто обрежьте изображение в 3-х размерах и примените структуру ниже как маску.

Для лучшего результата размыть маску, чтобы у нее не было твердых краев.