repeating-linear-gradient()

Содержание

Создаёт бесконечно повторяющийся линейный градиент, образуя тем самым фоновый узор. По своему действию похожа на функцию linear-gradient() и имеет те же параметры. При этом цвета последовательно сменяют друг друга, после последнего цвета в списке цветов градиента сразу же идёт первый.

Синтаксис

background-image: repeating-linear-gradient([<угол> | to <позиция> ,] <цвет> [, <цвет>]*);

Значения

<угол>

Задаёт угол наклона градиентной линии, который показывает направление градиента. Вначале пишется положительное или отрицательное значение угла, затем к нему слитно добавляется deg.

Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке. Отсчёт угла наклона градиентной линии показан ниже.

Угол

<цвет>
Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах.
<позиция>
Для записи позиции вначале пишется to, а затем добавляются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать to left top или to top left. В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #000 и #fff, по другому от чёрного к белому.
Табл. 1. Типы градиента
ПозицияУголОписаниеВид
top270degСверху вниз.
left0degСлева направо.
bottom 90degСнизу вверх.
right 180degСправа налево.
top left -45degОт левого верхнего угла к правому нижнему.
top right225degОт правого верхнего угла к левому нижнему.
bottom left45degОт левого нижнего угла к правому верхнему.
bottom right-225degОт правого нижнего угла к левому верхнему.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title> 
  <style>
   body {
    background: repeating-linear-gradient(-45deg, #fff, #fff 25px, #e2edc1 25px, #e2edc1 50px) fixed;
   }
  </style>
 </head>
 <body> 
 </body>
</html>

В данном примере фон веб-страницы заполняется чередующимися белыми и цветными полосками расположенными под углом 45 градусов (рис. 1).

Использование repeating-linear-gradient() для создания фона

Рис. 1. Использование repeating-linear-gradient() для создания фона

Примечание

Chrome до версии 26, Safari до версии 6.1 и Android до версии 4.4 поддерживают -webkit-repeating-linear-gradient().

Opera до версии 12.10 поддерживает -o-repeating-linear-gradient().

Firefox до версии 16 поддерживает -moz-repeating-linear-gradient().

Все свойства с префиксами не используют ключевое слово to при задании направления градиента.

Спецификация

СпецификацияСтатус
CSS Image Values and Replaced Content Module Level 3Возможная рекомендация

Браузеры

Internet ExplorerChromeOperaSafariFirefox
10102611.1012.105.16.13.616
AndroidFirefox MobileOpera MobileSafari Mobile
2.14116126.1




Рекомендую хостинг: beget.ru

Сервер падал:50 дн. 10:17 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru