Содержание
Используя код CSS, вы можете создать полосатый фон для веб-страницы без использования графики. Этот эффект использует уровни градиента CSS с несколькими цветными перерывами, а также свойство background-size, чтобы вектор градиента повторялся по экрану. Лучший способ сделать это - начать со сплошного фона и сделать одну из прозрачных полосок для того, чтобы этот цвет был выделен. Пользователи, которые посещают вашу страницу, используя старые интернет-браузеры, увидят сплошной цвет.
направления
-
Откройте файл таблицы стилей CSS в Блокноте или в программе редактирования кода. Добавьте это правило в конец файла:
html {height: 100%; }
Это правило позволяет заполнить весь фон веб-страницы градиентной полосой, которую он создаст.
-
Установите цвет фона для вашей страницы в «html {}», чтобы обеспечить базовый цвет для ваших полос и по умолчанию для старых браузеров:
html {height: 100%; цвет фона: черный; }
-
Добавьте следующий код в стандартный html {} по умолчанию, чтобы создать эффект горизонтальной полосы:
background-image: линейный градиент (прозрачный 50%, белый 50%);
Это создаст две цветовые границы, первая будет прозрачной, а вторая - белой. Каждое прерывание цвета занимает 50% пространства градиента на экране. Отрегулируйте ширину полос, изменив значения в процентах.
-
Добавьте нулевое значение к первому разрыву цвета и разделите его запятой:
Фоновое изображение: линейный градиент (0, прозрачный 50%, черный 50%);
Это позволит расположить ваши полосы вертикально, а не горизонтально.
-
Дублируйте свойство background-image и его значения в новой строке. Сделайте это дважды, создав три строки с одинаковым кодом. Добавьте префикс «-moz» к линейному градиенту в одной из повторяющихся строк кода. Добавьте префикс -webkit к другой повторяющейся строке:
background-image: линейный градиент (0, прозрачный 50%, белый 50%); background-image: -moz-linear-Gradient (0, прозрачный 50%, белый 50%); background-image: -webkit-linear-Gradient (0, прозрачный 50%, белый 50%);
-
Ограничьте градиент определенным количеством пикселей, установив размер фона в следующей строке в своем коде CSS:
размер фона: 20 пикселей;
Измените количество пикселей размера фона, чтобы изменить размер градиента. Из-за постоянного повторения градиента ширины страницы каждое повторение будет соответствовать набору полос на экране.
направления
предупреждение
- Некоторые старые браузеры не поддерживают CSS3-градиенты. Если вы хотите отобразить полосы для всех типов браузеров, используйте условные комментарии, чтобы включить таблицу стилей с повторяющейся диаграммой.