Допустим, у меня есть изображение шириной и высотой 1700 x 1129 пикселей. Каков наилучший способ повторить это изображение, чтобы вы не могли сказать, что оно было повторено. Я пытался использовать repeat-y, но это похоже на другую графику.
Повтор фона CSS
Ответы (4)
Нет ничего общего с css. Ваш образ не допускает повторения. Чтобы повторить изображение без плохих эффектов, ваше изображение должно иметь одинаковое начало и конец в том направлении, в котором вы хотите, чтобы оно повторялось.
person
Linus Caldwell
schedule
29.03.2013
Есть довольно простой трюк: завершите стороны изображения статическим цветом (например, черным или темно-коричневым в вашем примере), отцентрируйте фоновое изображение и залейте фон цветом.
body { background: black url(image.png) no-repeat center top; }
person
Koen Betsens
schedule
29.03.2013
Используйте свойство background-size.
Если у вас есть фон, который, по вашему мнению, можно замаскировать повторением по горизонтали, сделайте следующее.
background-size: 50% 100%; background-repeat: repeat-x;
если вы считаете, что фон можно замаскировать повторением по вертикали, сделайте следующее:
background-size: 100% 50%; background-repeat: repeat-y;
person
Mr_Green
schedule
29.03.2013
Вам нужно будет сделать бесшовное изображение, это означает, что верхний и нижний края, а также левый и правый края изображения идеально совпадают с противоположными краями, поэтому углы и цветовые переходы не видны. Подход css с использованием background-repeat совершенно прекрасен.
Это часто используется в компьютерной графике, в основном в мире 3D. Существует множество руководств по созданию бесшовных изображений, одно из них можно найти здесь.
person
Fabian Lauer
schedule
29.03.2013
Слово бесшовное. Как и шов, соединение ткани или кожи, когда две вещи сшиваются вместе.
- person AmbroseChapel; 29.03.2013
о, я сожалею об этом ... исправляю это
- person Fabian Lauer; 29.03.2013
background-size: 100% 100%? Это заставит фон полностью покрыть элемент. - person Mr_Green schedule 29.03.2013