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