Как добавить фон css

Как добавить тёмную тему на страницу

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

Сегодня мы добавим на страницу переключатель тёмной и светлой темы с помощью CSS.

Автопереключение тёмной темы

Современные браузеры умеют определять, что на телефоне или компьютере включена тёмная тема. Для этого разработчики используют такой медиазапрос:

@media screen and (prefers-color-scheme: dark) <>

Если на устройстве используется тёмная тема, то CSS выполнит всё, что написано в фигурных скобках. В нашем случае нам нужно сделать тёмный фон и светлый текст:

@media screen and (prefers-color-scheme: dark) < body < background: black; color: white; >>

Добавим этот код в стили на странице, и задача решена: мы получили поддержку тёмной темы. Если в настройках устройства переключить тему обратно на светлую, то сайт тоже получит белый фон.

Ручное переключение темы

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

Чтобы не создавать с нуля страницу, поступим так: создадим копию главной страницы нашего учебного сайта и добавим туда переключатель, который заставит тему смениться.

Настраиваем стили

Единственное, что нам нужно добавить в стили — это два класса: для светлой и тёмной темы:

.theme-dark < background: black; color: white; >.theme-light

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

Внешне страница никак не поменяется — мы ещё не применили эти стили. Чтобы это сделать, надо поработать с остальными элементами, например добавить id к тегу — по нему мы будем обращаться к содержимому всей страницы:

Добавляем переключатель

Чтобы мы могли менять светлую тему на тёмную и обратно, добавим простой переключатель. Сделаем его в виде абзаца и добавим его сразу после строки поиска:

Вот что здесь происходит:

onclick=»darkLight()» ← говорим, что должно произойти при нажатии: вызываем функцию darkLight();

style=»cursor: help;»> ← меняем внешний вид курсора при наведении на переключатель;

Включить тёмную тему

← текст надписи.

Переключатель появился на странице, но пока ничего не переключает. Исправим это в скрипте.

Пишем скрипт

Мы указали в свойствах переключателя, что при нажатии нужно выполнить функцию darkLight() — значит, нам нужно добавить её в рабочий скрипт.

Чтобы не зависеть от работы других скриптов и не лезть в их код, сделаем новый js-файл dark.js и положим в него такой код:

// на старте тёмная тема не установлена var dark = false; // получаем доступ ко всей странице и к абзацу с переключателем var a = document.body; var p = document.getElementById("select") // эта функция будет срабатывать при нажатии на переключатель function darkLight() < // если тёмная тема не активна if (!dark) < // добавляем класс с тёмной темой ко всей странице a.className = "theme-dark"; // меняем надпись на переключателе p.innerHTML = "Включить светлую тему"; // а если активна — >else < // добавляем класс со светлой темой ко всей странице a.className = "theme-light"; // меняем надпись на переключателе p.innerHTML = "Включить тёмную тему"; >// меняем значение темы на противоположное dark = !dark; >

Последнее, что осталось сделать, — подключить скрипт в конце HTML-страницы:

Теперь у нас появилась поддержка тёмной темы с моментальным переключением:

Что дальше

Этот способ работает только на одной странице, и после перезагрузки тему нужно переключать заново. В следующий раз сделаем апгрейд — научим сайт запоминать настройки и применять их ко всему сайту. А ещё подружим автопереключение с надписью на переключателе.

Получите ИТ-профессию

В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.

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

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

Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image или универсальное свойство background , как показано в примере 1.

Пример 1. Градиент

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Линейный градиент для абзаца

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

Для записи позиции вначале пишется to , а затем добавляются ключевые слова top , bottom и left , right , а также их сочетания. Порядок слов не важен, можно написать to left top или to top left . В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #000 и #fff, по другому от чёрного к белому.

Табл. 1. Типы градиента

Позиция	Угол	Описание	Вид
to top	0deg	Снизу вверх.
to left	270deg	Справа налево.
to bottom	180deg	Сверху вниз.
to right	90deg	Слева направо.
to top left	От правого нижнего угла к левому верхнему.
to top right	От левого нижнего угла к правому верхнему.
to bottom left	От правого верхнего угла к левому нижнему.
to bottom right	От левого верхнего угла к правому нижнему.

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

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

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

Для создания сложных градиентов двух цветов уже будет недостаточно, синтаксис позволяет добавлять их неограниченное количество, перечисляя цвета через запятую. При этом можно использовать прозрачный цвет (ключевое слово transparent ), а также полупрозрачный с помощью формата RGBA, как показано в примере 2.

Пример 2. Полупрозрачные цвета

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

     body < background: url(images/celtic1.png); >div 
Генезис свободного стиха, несмотря на внешние воздействия, отталкивает словесный метаязык.
  

Результат данного примера показан на рис. 2.

Рис. 2. Градиент с полупрозрачными цветами

Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию. В примере 3 показано создание градиентной кнопки, в которой положение второго цвета из трёх задано как 36%.

Пример 3. Градиентная кнопка

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

       Нажми меня нежно  

Результат данного примера показан на рис. 3.

Рис. 3. Градиентная кнопка

За счёт задания положения цвета можно получить резкие переходы между цветами, что в итоге даёт набор однотонных полосок. Так, для двух цветов надо указать четыре цвета, первые два цвета одинаковы и начинаются от 0% до 50%, оставшиеся цвета также одинаковы меж собой и продолжаются от 50% до 100%. В примере 4 полоски добавляются в качестве фона веб-страницы. Из-за того, что крайние значения подставляются автоматически их можно не указывать, так что достаточно написать всего-лишь два цвета.

Пример 4. Однотонные полоски

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

       
Типичная европейская буржуазность и добропорядочность изящно иллюстрирует официальный язык.
  

Результат данного примера показан на рис. 4. Обратите внимание, что один из цветов градиента задан прозрачным, поэтому он меняется косвенно через цвет фона веб-страницы.

Рис. 4. Фон из горизонтальных полосок

Градиенты достаточно популярны среди веб-дизайнеров, но их добавление усложняется разными свойствами под каждый браузер и указанием множества цветов. Чтобы вам было проще создавать градиенты и вставлять их в код, рекомендую сайт www.colorzilla.com/gradient-editor с помощью которого легко настроить градиенты и сразу получить нужный код. Имеются готовые шаблоны (Presets), просмотр результата (Preview), настройка цветов (Adjustments), конечный код (CSS), который поддерживает IE через фильтры. Для тех, кто работал в Фотошопе или другом графическом редакторе, создание градиентов покажется плёвым делом, остальным не составит труда быстро разобраться. В общем, всячески рекомендую.

Статьи по теме

Геометрические фигуры на CSS

Отличная подборка, как нарисовать различные геометрические фигуры одним элементом HTML.

Квадрат

#square

Прямоугольник

#rectangle

Круг

#circle

Овал

#oval < width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; >

Треугольник вверх

#triangle-up

Треугольник вниз

#triangle-down

Треугольник налево

#triangle-left

Треугольник направо

#triangle-right

Треугольник в левом верхнем углу

#triangle-topleft

Треугольник в правом верхнем углу

#triangle-topright

Треугольник в левом нижнем углу

#triangle-bottomleft

Треугольник в правом нижнем углу

#triangle-bottomright

Параллелограмм

#parallelogram

Трапеция

#trapezoid

Звезда (6-конечная)

#star-six < width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; >#star-six:after

Звезда (5-конечная)

 #star-five < margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); >#star-five:before < border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); >#star-five:after

Пятиугольник

#pentagon < position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: red transparent; >#pentagon:before

Шестиугольник

#hexagon < width: 100px; height: 55px; background: red; position: relative; >#hexagon:before < content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; >#hexagon:after

Восьмиугольник

#octagon < width: 100px; height: 100px; background: red; position: relative; >#octagon:before < content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; >#octagon:after

Сердечко

#heart < position: relative; width: 100px; height: 90px; >#heart:before, #heart:after < position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; >#heart:after

Знак бесконечности

#infinity < position: relative; width: 212px; height: 100px; >#infinity:before, #infinity:after < content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >#infinity:after

Как задать цвет фона в HTML

Соавтором этой статьи является Jessica Andzouana, наш постоянный соавтор. Постоянные соавторы wikiHow работают в тесном сотрудничестве с нашими редакторами, чтобы обеспечить максимальную точность и полноту статей.

Количество просмотров этой статьи: 218 587.

В этой статье:

Из этой статьи вы узнаете, как изменить цвет фона веб-страницы, если отредактировать ее HTML-код.

Метод 1 из 4:

Как подготовиться к редактированию HTML-кода

• Перейдите на страницу https://www.w3schools.com/colors/colors_picker.asp в веб-браузере компьютера.
• Выберите базовый цвет, который хотите использовать, в разделе «Pick a Color» (Выбрать цвет).
• Выберите оттенок в правой части страницы.
• Запишите код, который отобразится справа от выбранного оттенка.

• HTML-документ можно открыть в Notepad++ или Блокноте (Windows), а также в TextEdit или BBEdit (Mac).

Добавьте заголовок «html» в документ. Все параметры стиля страницы, включая цвет фона, должны находиться между тегами :

DOCTYPE html> html> head> style> style> head> html> 

Создайте пустую строку между тегами «style». На этой строке, которая должна находиться под тегом

, вы введете необходимую информацию.

Добавьте элемент «body». Введите следующий код между тегами :

body  > 

• Все, что будет заключено внутри элемента «body» в CSS, повлияет на всю страницу.
• Пропустите этот шаг, если хотите создать градиентный фон.

Метод 2 из 4:

Как создать однотонный фон

Найдите заголовок «html». Он должен быть в верхней части документа.

Добавьте свойство «background-color» в элемент «body». Введите background-color: в фигурных скобках внутри элемента «body». Должен получиться следующий код:

body  background-color: > 

• Обратите внимание, что в этом коде необходимо использовать слово «color», а не «colour».

Добавьте нужный цвет фона в свойство «background-color». Справа от «background-color:» введите числовой код выбранного цвета, а затем введите точку с запятой (;). Например, чтобы фон страницы сделать розовым, напишите следующий код:

body  background-color: #d24dff; > 

Просмотрите информацию внутри тегов «style». На этом этапе заголовок вашего HTML-документа должен выглядеть следующим образом:

DOCTYPE html> html> head> style> body  background-color: #d24dff > style> head> html> 

Используйте «background-color», чтобы задать цвет фона других элементов (заголовков, абзацев и тому подобных). Например, чтобы задать цвет фона основного заголовка () или абзаца (

), напишите следующий код: [2] X Источник информации

DOCTYPE html> html> head> style> body  background-color: #93B874; > h1  background-color: #00b33c; > p  background-color: #FFFFFF); > style> head> body> h1>Заголовок на зеленом фонеh1> p>Абзац на белом фонеp> body> html> 

Метод 3 из 4:

Как создать градиентный фон

Найдите заголовок «html». Он должен быть в верхней части документа.

Запомните основной синтаксис этого процесса. Чтобы создать градиент, необходимо знать две величины: начальную точку/угол и ряд цветов, которые будут переходить один в другой. Можно выбрать несколько цветов, чтобы они переходили друг в друга; также можно задать направление или угол перехода. [3] X Источник информации

background: linear-gradient(направление/угол, цвет1, цвет2, цвет3 и так далее); 

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

html  min-height: 100%; > body  background: -webkit-linear-gradient(#93B874, #C9DCB9); background: -o-linear-gradient(#93B874, #C9DCB9); background: -moz-linear-gradient(#93B874, #C9DCB9); background: linear-gradient(#93B874, #C9DCB9); background-color: #93B874; > 

• В различных браузерах функции градиента реализованы по-разному, поэтому нужно добавить несколько версий кода.

Создайте направленный градиент. Если вы не хотите, чтобы градиент шел по вертикали, укажите направление перехода цветов. Для этого введите следующий код между тегами : [4] X Источник информации

html  min-height: 100%; > body  background: -webkit-linear-gradient(left, #93B874, #C9DCB9); background: -o-linear-gradient(right, #93B874, #C9DCB9); background: -moz-linear-gradient(right, #93B874, #C9DCB9); background: linear-gradient(to right, #93B874, #C9DCB9); background-color: #93B874; > 

• Если хотите, переставьте слова «left» (влево) и «right» (вправо), чтобы поэкспериментировать с разными направлениями градиента.

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

background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%); 

background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1)); 

Просмотрите код. Код для создания цветового градиента в качестве фона веб-страницы будет выглядеть примерно так:

DOCTYPE html> html> head> style> html  min-height: 100%; > body  background: -webkit-linear-gradient(left, #93B874, #C9DCB9); background: -o-linear-gradient(right, #93B874, #C9DCB9); background: -moz-linear-gradient(right, #93B874, #C9DCB9); background: linear-gradient(to right, #93B874, #C9DCB9); background-color: #93B874; > style> head> body> body> html> 

Метод 4 из 4:

Как создать меняющийся фон

Найдите заголовок «html». Он должен быть в верхней части документа.

Добавьте свойство «animation» в элемент «body». Введите следующий код после «body

-webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite; 

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

Добавьте цвета в свойство «animation». Воспользуйтесь правилом «@keyframes», чтобы задать цвета фона, которые будут циклически меняться, а также время, в течение которого каждый цвет будет отображаться на странице. Не забудьте ввести разный код для различных браузеров. Введите следующий код под закрывающей фигурной скобкой элемента «body»: [6] X Источник информации

@-webkit-keyframes colorchange  0% background: #33FFF3;> 25% background: #78281F;> 50% background: #117A65;> 75% background: #DC7633;> 100% background: #9B59B6;> > @keyframes colorchange  0% background: #33FFF3;> 25% background: #78281F;> 50% background: #117A65;> 75% background: #DC7633;> 100% background: #9B59B6;> > 

• Обратите внимание, что два правила ( @-webkit-keyframes и @keyframes ) имеют одинаковые цвета фона и проценты. Это сделано для того, чтобы меняющийся фон правильно работал в любом браузере.
• Проценты ( 0% , 25% и так далее) обозначают долю от времени ( 60 с ). Когда страница загрузится, ее фоном будет цвет #33FFF3 . Когда пройдет 15 с (25% от 60 с), фон сменится на цвет # 7821F и так далее.
• Измените время и цвета, чтобы они соответствовали желаемому результату.

Просмотрите код. Код для создания меняющегося фона должен выглядеть следующим образом:

DOCTYPE html> html> head> style> body  -webkit-animation: colorchange 60s infinite; animation: colorchange 60s infinite; > @-webkit-keyframes colorchange  0% background: #33FFF3;> 25% background: #78281F;> 50% background: #117A65;> 75% background: #DC7633;> 100% background: #9B59B6;> > @keyframes colorchange  0% background: #33FFF3;> 25% background: #78281F;> 50% background: #117A65;> 75% background: #DC7633;> 100% background: #9B59B6;> > style> head> body> body> html>