Главная » Языки программирования

Html два цвета фона

На чтение 8 мин
Содержание
  1. Линейные градиенты
  2. linear-gradient
  3. Угол или направление градиента
  4. Управление положением цветов
  5. repeating-linear-gradient
  6. Ограничения
  7. Сайдбар
  8. Статьи
  9. Страницы
  10. Проекты
  11. Как сделать фон из двух цветов?
  12. Using multiple backgrounds
  13. Example
  14. HTML
  15. CSS
  16. Result
  17. See also
  18. Found a content problem with this page?

Линейные градиенты

CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter, также для IE9 можно использовать SVG.

Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image .

linear-gradient

Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:

background: linear-gradient(orangered, gold);

Цветов может быть любое количество больше двух. Также можно управлять направлением градиента и границами (точками остановки) цветов.

Угол или направление градиента

Направление можно задавать градусами или ключевыми словами.

В градусах: от 0 до 360, например 270deg .

to bottom = 180deg — значение по умолчанию;

Ключевые слова можно сочетать между собой, чтобы получить диагональный градиент, например to top left .

Ниже можно увидеть как работают разные направления в растяжке от сиреневого до желтого:

Вот код самого первого квадрата, для примера:

.top-left  background: linear-gradient(to top left, purple, crimson, orangered, gold); >

Следует помнить, что to top right не то же самое, что 45deg . Цвета градиента располагаются перпендикулярно линии направления градиента. При to top right линия идет из нижнего левого в верхний правый угол, при 45deg — располагается строго под этим углом независимо от размеров фигуры.

Разница хорошо видна на прямоугольных фигурах:

Управление положением цветов

Значения точек остановки для цветов градиента задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.

Примеры задания значений в % , в em и значения, выходящие за границы элемента:

Чем ближе находятся точки остановки соседних цветов, тем четче будет граница между ними. Таким образом можно легко делать полосатые фоны:

Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:

Полоски на фоне сайдбара — ещё один градиент, состоящий из чередования полной прозрачности и белого цвета с прозрачностью 30%. Градиенты с полупрозрачными цветами удобны тем, что их можно наложить поверх фона любого цвета.

Градиент в примере задан сложным длинным кодом, потому что полоски должны располагаться только над фоном для сайдбара. Если не пытаться сделать всё фоном для одного блока, можно было бы решить задачу с помощью псевдоэлемента.

При отсутствии ограничений код может быть гораздо короче:

.light  background: peachpuff linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50% ) center center / 2em; > .dark  background: steelblue linear-gradient( rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50% ) center center / 100% 1em; >

В первой строчке задаем фоновый цвет элемента, тип и направление (цвет и направление можно опустить), во второй — определяем цвета градиента и границу между ними, в третьей — задаем положение и размер получившегося изображения. Самая важная часть — размер. По умолчанию фон повторяется, поэтому получившийся паттерн заполнит собой фон элемента. Очень легко и понятно : )

Вся запись может быть сделана в одну строчку, но для читабельности удобнее писать в несколько, особенно для сложных градиентов.

Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:

Gradient dirt

Действующий пример (смотреть в Firefox): jsbin.com/OvOwEma/2/edit.

Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0) . Про разные способы задавать цвета можно почитать здесь.

Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться leaverou.github.io/css-colors, инструментом от Lea Verou.

repeating-linear-gradient

Помимо обычного linear-gradient можно сделать repeating-linear-gradient — повторяющийся градиент

background: repeating-linear-gradient( green, green .5em, transparent .5em, transparent 1em );

К сожалению, повторяющиеся градиенты ведут себя как попало и подойдут только для узоров, которым не важна точность. Если нужна аккуратность, используйте linear-gradient в сочетании с background-size и background-repeat .

Upd. от 3.07.20: в данный момент повторяющиеся градиенты корректно отрисоваются в большинстве браузеров, и ими можно свободно пользоваться.

Ограничения

Градиенты имеют такое же ограничение, что и box-shadow : им нельзя задавать отдельно цвета или направление. Это приводит к дублированию кода и острой потребности воспользоваться препроцессорами в случае создания сложных градиентов.

Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти.

Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.

В сочетании с базовыми возможностями управления фоновыми картинками градиенты дают широчайшие возможности для создания фонов разной степени сложности совершенно без использования изображений. Градиентами можно делать сложные и интересные паттерны, но это уже совсем другая тема.

Сайдбар

Статьи

  • Математические функции в CSS
  • Адаптивное видео с помощью встроенных математических функций CSS
  • Недоступность в картинках
  • Единицы размеров в CSS
  • Генератор цветовых тем
  • Jekyll → Gatsby
  • Вариативные шрифты
  • Размеры в SVG
  • Адаптивный Pixel Perfect
  • Логотип не отвечает или временно недоступен
  • SVG-паттерны
  • Мыльные пузыри на SVG
  • SVG-градиенты
  • Весёлая консолька
  • SVG-маски
  • Умная прокрутка со Scroll Snap Points
  • CSS-анимации для ротации изображений
  • Анимированные SVG-маски
  • Странности обводки в SVG
  • SVG-прелоадеры
  • Анимируем градиенты ещё раз
  • Background-blend-mode
  • Возможности оформления SVG
  • CSS и SVG маски
  • Nth-child и nth-of-type
  • SVG-иконки
  • SVG: заливка и обводка
  • SVG-path
  • SVG: группировка и переиспользование элементов
  • SVG-фигуры и трансформации
  • SVG
  • СSS-градиенты и 3D
  • Рисовалка анимированных теней
  • Свежие CSS-паттерны
  • CSS-паттерны
  • Радиальные градиенты
  • Линейные градиенты
  • Крестики-нолики на CSS
  • Border-image
  • Электронные часы на CSS и JS.
  • Сколько весят селекторы?
  • Символы юникода
  • Свойство content
  • Анимируем CSS-градиенты
  • Текстовые эффекты
  • Древовидный список на CSS
  • Css-селекторы, часть 2
  • Css-селекторы
  • Контекст наложения
  • Два способа «прошить» элемент по краю
  • Box-sizing
  • Цвета в CSS
  • Фон под строчками: добавляем поля
  • Box-shadow
  • Css-фигуры: лепесток
  • Transform
  • Css Animation
  • 3D-куб
  • Border-radius
  • First letter
  • Эти глаза напротив
  • CSS-фигуры
  • Стрелки с помощью свойства border
  • Flexbox

Страницы

Проекты

Источник

Как сделать фон из двух цветов?

Суть в том, что хочу сделать вертикально пол экрана белый фон, а вторая — черный.
Можно ли реализовать в html?

Как сделать резиновый фон шапки и резиновый фон меню?
Как сделать резиновый фон шапки и резиновый фон меню?

Как сделать шапку 2х цветов с переходом
Задача — сделать шапку как на картинке (2 цвета с косым переходом)

Как сделать маргающий текст из 2х разных цветов
Нужно сделать маргающий текст с периодом в 0.5 сек из красного и синего цветов, говорят на это.

Как сделать на одной странице ссылки разных цветов?
Т.е. например сверху страницы ссылки синие, снизу — красные и т.п.

1 2 3 4 5 6 7 8 9 10 11 12 13
html, body{ height: 100%; } body{ background: #000000; /* Old browsers */ background: -moz-linear-gradient(top, #000000 50%, #ffffff 50%, #ffffff 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#000000), color-stop(50%,#ffffff), color-stop(50%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #000000 50%,#ffffff 50%,#ffffff 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #000000 50%,#ffffff 50%,#ffffff 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #000000 50%,#ffffff 50%,#ffffff 50%); /* IE10+ */ background: linear-gradient(to bottom, #000000 50%,#ffffff 50%,#ffffff 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
#bg { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1;} #bg:after, #bg:before { content: ""; display: block; height: 50%; left: 0; width: 100%;} #bg:after { background-color: #000; bottom: 0;} #bg:before { background-color: #f00; top: 0;}
1 2 3 4 5 6 7 8 9 10 11 12 13
#bg:after, #bg:before { content: ""; display: block; height: 100%; top: 0; width: 50%;} #bg:after { background-color: #fff; right: 0;} #bg:before { background-color: #000; left: 0;}

Источник

Using multiple backgrounds

You can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.

Specifying multiple backgrounds is easy:

.myclass  background: background1, background2, /* … ,*/ backgroundN; >

You can do this with both the shorthand background property and the individual properties thereof except for background-color . That is, the following background properties can be specified as a list, one per background: background , background-attachment , background-clip , background-image , background-origin , background-position , background-repeat , background-size .

Example

In this example, three backgrounds are stacked: the Firefox logo, an image of bubbles, and a linear gradient:

HTML

div class="multi-bg-example">div>

CSS

.multi-bg-example  width: 100%; height: 400px; background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; >

Result

(If image does not appear in CodePen, click the ‘Tidy’ button in the CSS section)

As you can see here, the Firefox logo (listed first within background-image ) is on top, directly above the bubbles graphic, followed by the gradient (listed last) sitting underneath all previous ‘images’. Each subsequent sub-property ( background-repeat and background-position ) applies to the corresponding backgrounds. So the first listed value for background-repeat applies to the first (frontmost) background, and so forth.

See also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Читайте также:  Python dont close console
Оцените статью
© 2023 Программирование