фон css, повторяющийся с 300 пикселей и далее
-
12-09-2019 - |
Вопрос
Мне интересно, знает ли кто-нибудь, как достичь следующего - взгляните на http://www.dspts.si
Первая 1/3 экрана имеет пустой фон, и начиная с этого момента рисунок должен повторяться.Я сделал это прямо сейчас, создав очень длинный шаблон png и установив для него значение offset 300 и repeat-x.Однако я не доволен этим решением, потому что оно сломается, если страницы когда-нибудь станут длиннее, чем фоновое изображение png.
Спасибо за любые предложения!
Решение
Поместите повторяющийся узор в качестве фона для html
элемент, затем белое изображение размером 1 × 300 пикселей в качестве фонового изображения для body
элемент, и у вас все готово.
html, body {
height: 100%;
}
html {
background: url(dotted.png);
}
body {
background: url(white_1x300.png) 0 0 repeat-x;
}
Вам не обязательно использовать html
и body
теги для этого, но это самый простой способ и не требует никакой новой разметки.
Другие советы
Вы можете указать несколько фонов.Видишь Могу ли я иметь несколько фоновых изображений, используя CSS?.Упомянутые там методы включают в себя:
- Поместите всю страницу в другую
<div>
контейнер или неправильное использование<html>
пометьте это.
Это означает, что вы указываете фон для<body>
и один для<html>
. - Используйте CSS3, который поддерживает несколько фоновых изображений.Это пока поддерживается не всеми распространенными браузерами.
Да, укажите ваше фоновое изображение как обычное, но установите background-position
вот так:
background-position:0 300px;
Это приведет к тому, что фоновое изображение будет начинаться с 0 пикселей слева и 300 пикселей сверху.
Давайте не будем забывать, что вы можете использовать Поджигатель с FireFox чтобы легко диагностировать методы на веб-сайтах.