Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Фон для css: Фон в CSS | WebReference

Цвет фона — попутный ветер CSS

bg-inherit background-color: inherit;
bg-current background-color: currentColor;
bg-transparent background-color: прозрачный;
bg-black background-color: rgb(0 0 0);
bg-white background-color: rgb(255 255 255);
bg-slate-50 background-color: rgb(248 250 252);
bg-slate-100 background-color: rgb(241 245 249);
bg-slate-200 background-color: rgb(226 232 240);
bg-slate-300 background-color: rgb(203 213 225);
bg-slate-400 background-color: rgb(148 163 184);
бг-шифер-500 background-color: rgb(100 116 139);
bg-slate-600 background-color: rgb(71 85 105);
bg-slate-700 background-color: rgb(51 65 85);
bg-slate-800 background-color: rgb(30 41 59);
bg-slate-900 background-color: rgb(15 23 42);
bg-grey-50 background-color: rgb(249250 251);
bg-grey-100 background-color: rgb(243 244 246);
bg-grey-200		 background-color: rgb(229 231 235);
bg-grey-300 background-color: rgb(209 213 219);
bg-grey-400 background-color: rgb(156 163 175);
bg-grey-500 background-color: rgb(107 114 128);
bg-grey-600 background-color: rgb(75 85 99);
bg-grey-700 background-color: rgb(55 65 81);
bg-grey-800 background-color: rgb(31 41 55);
bg-grey-900 background-color: rgb(17 24 39);
bg-zinc-50 background-color: rgb(250 250 250);
бг-цинк-100 background-color: rgb(244 244 245);
bg-zinc-200 background-color: rgb(228 228 231);
bg-zinc-300 background-color: rgb(212 212 216);
bg-zinc-400 background-color: rgb(161 161 170);
bg-zinc-500 background-color: rgb(113 113 122);
bg-zinc-600 background-color: rgb(82 82 91);
bg-zinc-700 background-color: rgb(63 63 70);
bg-zinc-800 background-color: rgb(39 39 42);
bg-zinc-900 background-color: rgb(24 24 27);
bg-neutral-50 background-color: rgb(250 250 250);
bg-neutral-100 background-color: rgb(245 245 245);
bg-neutral-200 background-color: rgb(229 229 229);
bg-neutral-300 background-color: rgb(212 212 212);
bg-neutral-400 background-color: rgb(163 163 163);
bg-neutral-500 background-color: rgb(115 115 115);
bg-neutral-600 background-color: rgb(82 82 82);
бг-нейтральный-700
background-color: rgb(64 64 64);
bg-neutral-800 background-color: rgb(38 38 38);
bg-neutral-900 background-color: rgb(23 23 23);
bg-stone-50 background-color: rgb(250 250 249);
bg-stone-100 background-color: rgb(245 245 244);
bg-stone-200 background-color: rgb(231 229228);
bg-stone-300 background-color: rgb(214 211 209);
bg-stone-400 background-color: rgb(168 162 158);
bg-stone-500 background-color: rgb(120 113 108);
bg-stone-600 background-color: rgb(87 83 78);
bg-stone-700 background-color: rgb(68 64 60);
bg-stone-800 background-color: rgb(41 37 36);
bg-stone-900 background-color: rgb(28 25 23);
bg-red-50 background-color: rgb(254 242 242);
bg-red-100 background-color: rgb(254 226 226);
bg-red-200 background-color: rgb(254 202 202);
бг-красный-300 background-color: rgb(252 165 165);
bg-red-400 background-color: rgb(248 113 113);
bg-red-500 background-color: rgb(239 68 68);
bg-red-600 background-color: rgb(220 38 38);
bg-red-700 background-color: rgb(185 28 28);
bg-red-800 background-color: rgb(153 27 27);
bg-red-900 background-color: rgb(127 29 29);
bg-orange-50 background-color: rgb(255 247 237);
bg-orange-100 background-color: rgb(255 237 213);
bg-orange-200 background-color: rgb(254 215 170);
bg-orange-300		 background-color: rgb(253 186 116);
bg-orange-400 background-color: rgb(251 146 60);
bg-orange-500 background-color: rgb(249 115 22);
bg-orange-600 background-color: rgb(234 88 12);
bg-orange-700 background-color: rgb(194 65 12);
bg-orange-800 background-color: rgb(154 52 18);
бг-оранжевый-900 цвет фона: rgb(124 45 18);
bg-amber-50 background-color: rgb(255 251 235);
bg-amber-100 background-color: rgb(254 243 199);
bg-amber-200 background-color: rgb(253 230 138);
bg-amber-300 background-color: rgb(252 211 77);
bg-amber-400 background-color: rgb(251 191 36);
bg-amber-500 background-color: rgb(245 158 11);
bg-amber-600 background-color: rgb(217 119 6);
bg-amber-700 background-color: rgb(180 83 9);
bg-amber-800 background-color: rgb(146 64 14);
bg-amber-900 background-color: rgb(120 53 15);
bg-yellow-50		 background-color: rgb(254 252 232);
bg-yellow-100 background-color: rgb(254 249 195);
bg-yellow-200 background-color: rgb(254 240 138);
bg-yellow-300 background-color: rgb(253 224 71);
bg-yellow-400 background-color: rgb(250 204 21);
bg-желтый-500 background-color: rgb(234 179 8);
bg-yellow-600 background-color: rgb(202 138 4);
bg-yellow-700 background-color: rgb(161 98 7);
bg-yellow-800
background-color: rgb(133 77 14);
bg-yellow-900 background-color: rgb(113 63 18);
bg-lime-50 background-color: rgb(247 254 231);
bg-lime-100 background-color: rgb(236 252 203);
bg-lime-200 background-color: rgb(217 249 157);
bg-lime-300 background-color: rgb(190 242 100);
bg-lime-400 background-color: rgb(163 230 53);
bg-lime-500 background-color: rgb(132 204 22);
bg-lime-600 background-color: rgb(101 163 13);
bg-lime-700 background-color: rgb(77 124 15);
bg-lime-800 background-color: rgb(63 98 18);
bg-lime-900 background-color: rgb(54 83 20);
bg-green-50 background-color: rgb(240 253 244);
bg-green-100 background-color: rgb(220 252 231);
bg-green-200 background-color: rgb(187 247 208);
bg-green-300 background-color: rgb(134 239 172);
bg-green-400 background-color: rgb(74 222 128);
bg-green-500 background-color: rgb(34 197 94);
bg-green-600 background-color: rgb(22 163 74);
bg-green-700 background-color: rgb(21 128 61);
bg-green-800 background-color: rgb(22 101 52);
bg-green-900 background-color: rgb(20 83 45);
bg-emerald-50 background-color: rgb(236 253 245);
bg-emerald-100 background-color: rgb(209 250 229);
бг-изумруд-200 background-color: rgb(167 243 208);
bg-emerald-300 background-color: rgb(110 231 183);
bg-emerald-400 background-color: rgb(52 211 153);
bg-emerald-500 background-color: rgb(16 185 129);
bg-emerald-600 background-color: rgb(5 150 105);
bg-emerald-700 background-color: rgb(4 120 87);
bg-emerald-800 background-color: rgb(6 95 70);
bg-emerald-900 background-color: rgb(6 78 59);
bg-teal-50 background-color: rgb(240 253 250);
bg-teal-100 background-color: rgb(204 251 241);
bg-teal-200 background-color: rgb(153 246 228);
bg-teal-300 background-color: rgb(94 234 212);
bg-teal-400 background-color: rgb(45 212 191);
bg-teal-500 background-color: rgb(20 184 166);
bg-teal-600 background-color: rgb(13 148 136);
bg-teal-700 background-color: rgb(15 118 110);
bg-teal-800 background-color: rgb(17 94 89);
bg-teal-900 background-color: rgb(19 78 74);
bg-cyan-50 background-color: rgb(236 254 255);
bg-cyan-100 background-color: rgb(207 250 254);
bg-cyan-200 background-color: rgb(165 243 252);
bg-cyan-300 background-color: rgb(103 232 249);
bg-cyan-400 background-color: rgb(34 211 238);
bg-cyan-500 background-color: rgb(6 182 212);
bg-cyan-600 background-color: rgb(8 145 178);
bg-cyan-700 background-color: rgb(14 116 144);
bg-cyan-800 background-color: rgb(21 94 117);
бг-голубой-900 цвет фона: rgb(22 78 99);
bg-sky-50 background-color: rgb(240 249 255);
bg-sky-100 background-color: rgb(224 242 254);
bg-sky-200 background-color: rgb(186 230 253);
bg-sky-300 background-color: rgb(125 211 252);
bg-sky-400 background-color: rgb(56 189248);
bg-sky-500 background-color: rgb(14 165 233);
bg-sky-600 background-color: rgb(2 132 199);
bg-sky-700 background-color: rgb(3 105 161);
bg-sky-800 background-color: rgb(7 89 133);
bg-sky-900 background-color: rgb(12 74 110);
bg-blue-50 background-color: rgb(239 246 255);
bg-blue-100 background-color: rgb(219 234 254);
bg-blue-200 background-color: rgb(191 219 254);
bg-blue-300 background-color: rgb(147 197 253);
bg-blue-400 background-color: rgb(96 165 250);
бг-синий-500 background-color: rgb(59 130 246);
bg-blue-600 background-color: rgb(37 99 235);
bg-blue-700 background-color: rgb(29 78 216);
bg-blue-800 background-color: rgb(30 64 175);
bg-blue-900 background-color: rgb(30 58 138);
bg-indigo-50 background-color: rgb(238 242 255);
bg-indigo-100 background-color: rgb(224 231 255);
bg-indigo-200 background-color: rgb(199 210 254);
bg-indigo-300 background-color: rgb(165 180 252);
bg-indigo-400 background-color: rgb(129 140 248);
bg-indigo-500 background-color: rgb(99 102 241);
bg-indigo-600 background-color: rgb(79 70 229);
bg-indigo-700 background-color: rgb(67 56 202);
bg-indigo-800 background-color: rgb(55 48 163);
bg-indigo-900 background-color: rgb(49 46 129);
bg-violet-50 background-color: rgb(245 243 255);
бг-фиолетовый-100 background-color: rgb(237 233 254);
bg-violet-200 background-color: rgb(221 214 254);
bg-violet-300 background-color: rgb(196 181 253);
bg-violet-400 background-color: rgb(167 139 250);
bg-violet-500 background-color: rgb(139 92 246);
bg-violet-600 background-color: rgb(124 58 237);
bg-violet-700 background-color: rgb(109 40 217);
bg-violet-800 background-color: rgb(91 33 182);
bg-violet-900 background-color: rgb(76 29 149);
bg-purple-50 background-color: rgb(250 245 255);
bg-purple-100 background-color: rgb(243 232 255);
bg-purple-200 background-color: rgb(233 213 255);
bg-purple-300 background-color: rgb(216 180 254);
bg-purple-400 background-color: rgb(192 132 252);
bg-purple-500 background-color: rgb(168 85 247);
bg-purple-600 background-color: rgb(147 51 234);
бг-фиолетовый-700 background-color: rgb(126 34 206);
bg-purple-800 background-color: rgb(107 33 168);
bg-purple-900 background-color: rgb(88 28 135);
bg-fuchsia-50 background-color: rgb(253 244 255);
bg-fuchsia-100 background-color: rgb(250 232 255);
bg-фуксия-200 background-color: rgb(245 208 254);
bg-фуксия-300 background-color: rgb(240 171 252);
bg-fuchsia-400 background-color: rgb(232 121 249);
bg-fuchsia-500 background-color: rgb(217 70 239);
bg-fuchsia-600 background-color: rgb(192 38 211);
bg-fuchsia-700 background-color: rgb(162 28 175);
bg-fuchsia-800 background-color: rgb(134 25 143);
bg-fuchsia-900 background-color: rgb(112 26 117);
bg-pink-50 background-color: rgb(253 242 248);
bg-pink-100 background-color: rgb(252 231 243);
bg-pink-200 background-color: rgb(251 207 232);
бг-розовый-300 background-color: rgb(249 168 212);
bg-pink-400 background-color: rgb(244 114 182);
bg-pink-500 background-color: rgb(236 72 153);
bg-pink-600 background-color: rgb(219 39 119);
bg-pink-700 background-color: rgb(190 24 93);
bg-pink-800 background-color: rgb(157 23 77);
bg-pink-900 background-color: rgb(131 24 67);
bg-rose-50 background-color: rgb(255 241 242);
bg-rose-100 background-color: rgb(255 228 230);
bg-rose-200 background-color: rgb(254 205 211);
bg-rose-300 background-color: rgb(253 164 175);
bg-rose-400 background-color: rgb(251 113 133);
bg-rose-500 background-color: rgb(244 63 94);
bg-rose-600 background-color: rgb(225 29 72);
bg-rose-700 background-color: rgb(190 18 60);
bg-rose-800 background-color: rgb(159 18 57);
bg-rose-900 background-color: rgb(136 1955);

Начало работы с фоном CSS

Главная/Блог/Учебники и руководства/Учебное пособие по CSS: Начало работы с фоном CSS

10 сентября 2021 г. — 8 мин чтения мы можем использовать для таких задач, как базовое оформление текста документа, анимация и веб-разработка. Существует множество различных свойств CSS, которые мы можем использовать для управления и настройки наших веб-страниц. Фон CSS — одно из таких свойств. Мы можем использовать свойство фона CSS, чтобы установить цвета фона, изображения, размеры и многое другое. Сегодня мы собираемся обсудить это полезное свойство CSS и изучить все различные вещи, которые мы можем с ним делать.

Начнем!

Мы рассмотрим :

  • Что такое фон CSS?
  • Фоновое изображение CSS
  • Цвет фона
  • Размер фона
  • Фоновое положение
  • Повтор фона
  • Фоновое приложение
  • Фоновый градиент
  • Подведение итогов и следующие шаги

Что такое фон CSS?

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

Фон CSS позволяет нам управлять многими свойствами фона, такими как:

  • Цвет
  • Размер
  • Позиция
  • Повторить
  • Приложение
  • Градиент
  • Изображение
  • Непрозрачность
  • и т. д.

Существует обширная поддержка браузера для фона CSS. Поддерживается следующими браузерами:

  • Хром
  • Край
  • Firefox
  • Internet Explorer
  • Опера
  • Сафари

Фоновое изображение CSS

Мы можем использовать свойство background-image для установки фоновых изображений для различных элементов. Современные браузеры поддерживают различные типы файлов изображений, такие как JPG, PNG, IMG, GIF и SVG. Мы также можем установить резервный цвет, который будет отображаться в случае, если наше изображение не загрузится или наш браузер не поддерживает наш тип файла изображения.

Чтобы установить фоновое изображение для страницы, мы можем использовать следующий код:

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

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

Если мы хотим установить резервный цвет, мы можем использовать следующий код:


Цвет фона

Свойство background-color позволяет нам применять сплошные цвета в качестве фона для элементов. Существуют различные значения свойств, которые мы можем использовать для управления аспектами цвета фона. Эти значения включают:

  • цвет : Это значение указывает цвет фона. Мы можем выбрать из списка значений цвета CSS, чтобы выбрать точные цвета, которые мы хотим использовать.

  • непрозрачность : Это значение определяет прозрачность элемента.

  • прозрачный : Это значение указывает, что цвет фона прозрачный.

  • начальный : для свойства будет установлено значение по умолчанию.

  • наследовать : свойство будет унаследовано от родительского элемента.

Мы также можем установить разные цвета фона для разных элементов. Вот пример:

Мы также можем использовать число от 0.0 до 1.0 , чтобы установить непрозрачность нашего фонового цвета. Чем меньше число, тем прозрачнее цвет. Рассмотрим пример:


Размер фона

Свойство background-size позволяет указать размер фонового изображения.


Положение фона

Свойство background-position позволяет указать начальную позицию фонового изображения. Фоновые изображения по умолчанию помещаются в верхний левый угол элемента. Это свойство имеет различные значения свойств, которые позволяют нам контролировать расположение наших фоновых изображений. Эти значения включают:

  • слева вверху : Фоновое изображение будет начинаться слева вверху.
  • слева внизу : Фоновое изображение будет начинаться слева внизу.
  • слева от центра : Фоновое изображение будет начинаться слева от центра.
  • справа вверху : Фоновое изображение будет начинаться справа вверху.
  • справа внизу : Фоновое изображение будет начинаться справа внизу.
  • справа по центру : Фоновое изображение будет начинаться справа от центра.
  • центр вверху : Фоновое изображение будет начинаться в центре вверху.
  • по центру снизу : Фоновое изображение будет начинаться по центру снизу.
  • по центру по центру : Фоновое изображение будет начинаться в центре по центру.
  • x% y% : Значение x соответствует горизонтальному положению, а значение y соответствует вертикальному положению. Верхний левый угол равен 0% 0% , а нижний правый угол равен 9.1786 100% 100% .
  • xpos ypos : Значение xpos — это горизонтальное положение, а значение ypos — вертикальное положение. Верхний левый угол — это значение 0 0 .
  • начальный : для свойства будет установлено значение по умолчанию.
  • наследовать : свойство будет унаследовано от родительского элемента.

Продолжайте изучать CSS бесплатно.

Начните бесплатное знакомство с CSS, HTML и JavaScript с помощью нашей 1-недельной образовательной неограниченной пробной версии. Текстовые схемы обучения Educative легко просматриваются и включают живую среду кодирования, что делает обучение быстрым и эффективным.

Стать разработчиком внешнего интерфейса


Повторение фона

Свойство background-repeat позволяет указать, повторяются ли фоновые изображения и если да, то каким образом. Фоновые изображения повторяются по вертикали и по горизонтали по умолчанию. Это свойство имеет много различных значений свойств, которые позволяют нам управлять тем, как будут представлены наши фоновые изображения. Давайте посмотрим на значения и что они делают:

  • Repeat : Фоновое изображение повторяется по вертикали и горизонтали. Он обрежет финальное изображение, если оно не подходит.
  • Repeat-x : Фоновое изображение повторяется по горизонтали.
  • Repeat-y : Фоновое изображение повторяется по вертикали.
  • без повтора : Фоновое изображение не будет повторяться (оно будет показано только один раз).
  • пробел : Фоновое изображение будет повторяться настолько, насколько это возможно без обрезки. Первое и последнее изображения размещаются в начале и в конце элемента, а пробелы равномерно распределяются между повторяющимися изображениями.
  • раунд : Фоновое изображение будет повторяться и манипулироваться, чтобы полностью заполнить пространство (без пробелов между ними).
  • начальный : для свойства будет установлено значение по умолчанию.
  • наследовать : свойство будет унаследовано от родительского элемента.

Фоновое вложение

Мы можем использовать свойство background-attachment, чтобы указать, хотим ли мы, чтобы наши фоновые изображения были фиксированными, или мы хотим, чтобы они перемещались вместе с остальной частью страницы при прокрутке. Это свойство имеет разные значения свойств, которые позволяют нам управлять тем, как мы прикрепляем наши фоновые изображения . Эти значения включают:

  • исправлено : фоновое изображение не прокручивается вместе со страницей.

  • локальный : Фоновое изображение прокручивается вместе с содержимым элемента.

  • прокрутка : Фоновое изображение прокручивается вместе со страницей.

  • начальный : для свойства будет установлено значение по умолчанию.

  • наследовать : свойство будет унаследовано от родительского элемента.

Давайте рассмотрим пример фиксированного значения :

Теперь давайте посмотрим на пример значения прокрутки . Это заставит изображение прокручиваться вместе со страницей.


Градиент фона

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

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

Свойство linear-gradient позволяет создавать линейные градиенты сверху вниз, слева направо и по диагонали. Мы должны определить по крайней мере два цветовых маркера, которые представляют собой цвета, которые мы хотим передать вместе. Мы можем определить несколько остановок цвета и повторить градиенты, если захотим.

Давайте посмотрим на базовый линейный градиент, который идет сверху вниз с двумя цветами:

Теперь давайте посмотрим на вертикальный линейный градиент, который имеет несколько цветов и создает радугу:

Радиальные градиенты

С помощью свойства радиального градиента мы можем создать градиент, определяемый его центром. Форма радиальных градиентов по умолчанию — эллипс, но ее можно изменить на круг. Мы должны определить по крайней мере две точки цвета с радиальными градиентами, но мы можем определить несколько, если хотим. Подобно линейным градиентам, мы также можем повторять радиальные градиенты.

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *