Крест на флаге не нарисовать одним градиентом: нужны две полосы — горизонтальная и вертикальная. Хорошая новость в том, что в одном background можно перечислить сколько угодно фонов через запятую.
.flag--finland {
aspect-ratio: 18 / 11;
background:
linear-gradient(#0000 calc(100% * 4 / 11), #002f6c 0 calc(100% * 7 / 11), #0000 0),
linear-gradient(90deg, #0000 calc(100% * 5 / 18), #002f6c 0 calc(100% * 8 / 18), #0000 0),
#fff;
}Каждый слой — синяя полоса между двумя прозрачными участками. Позиции взяты прямо из официальных пропорций флага 18×11 через calc(): так видно, откуда взялось число, и не нужно округлять. Подробнее о вычислениях в CSS — в мануале про calc().
Три правила списка фонов
- Первый в списке — сверху. Слои ложатся как стопка бумаги: первый фон перекрывает второй, второй — третий. Это непривычно, ведь в каскаде CSS обычно побеждает то, что написано последним.
- Сплошной цвет — только последним. Цвет всегда лежит под всеми картинками. Если поставить его в середину списка, всё объявление background станет невалидным, и фона не будет вообще.
- Слои можно смешивать. Линейные, радиальные, конические градиенты и обычные картинки через url() уживаются в одном списке.
Третье правило в деле — флаг Багамских Островов: чёрный треугольник из конического градиента поверх трёх полос линейного.
.flag--bahamas {
aspect-ratio: 2 / 1;
background:
conic-gradient(at 43.3% 50%, #0000 240deg, #000 0 300deg, #0000 0),
linear-gradient(#00778b 33.33%, #ffc72c 0 66.67%, #00778b 0);
}Треугольник равносторонний, его основание — левый край флага. Вершина при таких пропорциях оказывается на 43,3% ширины, а стороны отходят от вершины на 30° вверх и вниз от направления «влево» (270deg) — отсюда сектор от 240deg до 300deg. Всё остальное в коническом слое прозрачное и пропускает полосы снизу.
Размер слоя: background-size
До сих пор каждый градиент растягивался на весь блок. Но у слоя можно задать свой размер через background-size, и если он меньше блока, слой по умолчанию повторяется плиткой.
У флага Катара зубчатый край из девяти одинаковых зубцов. Достаточно нарисовать один зубец и сделать слой высотой в 1/9 флага — остальное браузер замостит сам:
.flag--qatar {
aspect-ratio: 28 / 11;
background: conic-gradient(from 249deg at 37.5% 50%, #fff 42deg, #8a1538 0);
background-size: 100% calc(100% / 9);
}В каждой плитке узкий белый клин «смотрит» влево из точки на 37,5% ширины: сектор шириной 42deg, повёрнутый так, чтобы его середина пришлась ровно на 270deg. Соседние плитки сливаются в белую полосу у древка с зубцами вправо.
Позиция слоя: background-position
Если повтор не нужен, ставим background-repeat: no-repeat и двигаем слой через background-position. Здесь есть ловушка, на которой спотыкаются почти все.
Процент в background-position — это не отступ. Значение 30% совмещает точку на 30% ширины картинки с точкой на 30% ширины блока. Поэтому:
- 0% прижимает слой к левому краю;
- 50% ставит его точно по центру;
- 100% прижимает к правому краю, а не выталкивает за него.
.box {
background: linear-gradient(#e8590c) var(--x) 0 / 25% 100% no-repeat;
}
.box--p0 { --x: 0%; }
.box--p50 { --x: 50%; }
.box--p100 { --x: 100%; }Если слой занимает долю w от ширины блока и должен начинаться с отступа x, процент считается так: x / (1 − w). Для отступа в пикселях или em такой проблемы нет — они работают как обычный сдвиг.
Шорткат: всё про слой в одном месте
Когда слоёв много, раздельные background-size и background-position со списками через запятую легко перепутать. Удобнее описать каждый слой целиком в шорткате background: картинка позиция / размер повтор.
Тот же финский крест, но теперь каждая полоса — отдельный маленький слой, а не градиент на весь флаг:
.flag--finland {
aspect-ratio: 18 / 11;
background:
linear-gradient(#002f6c) 33.333% 0 / calc(100% * 3 / 18) 100% no-repeat,
linear-gradient(#002f6c) 0 50% / 100% calc(100% * 3 / 11) no-repeat,
#fff;
}Вертикальная полоса шириной 3/18 должна начинаться на 5/18 ширины. По формуле выше: (5/18) / (15/18) = 1/3, то есть 33.333%. Горизонтальная полоса симметрична по высоте, поэтому ей хватает 50%. Слеш между позицией и размером обязателен: без позиции размер в шорткате не указать.
Градиент из одного цвета
В примере стоит linear-gradient(#002f6c) — градиент с единственным цветом. Это способ получить сплошную заливку, которой можно задать размер и позицию: обычный цвет в background так не умеет, он всегда на весь блок.
Такую запись браузеры научились понимать заметно позже остальных синтаксисов градиентов. В старом коде и в чужих статьях встречается эквивалент с двумя нулевыми позициями — linear-gradient(#002f6c 0 0). Если нужно поддержать браузеры постарше, безопаснее писать так: результат тот же.
Что запомнить
- Фоны перечисляются через запятую; первый лежит сверху, сплошной цвет — только последним.
- background-size меньше блока — слой повторяется плиткой.
- Процент в background-position совмещает точки слоя и блока, а не задаёт отступ.
- Шорткат слоя: картинка позиция / размер повтор.
