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

Содержание:

Как изменить цвет фона?
- - - Заголовок.
Фоновое изображение.
Как можно указывать цвет?
Как задать цвет текста с помощью CSS?
Установка цвета
- 2. По шестнадцатеричному значению
- 3. С помощью RGB
Позиционирование в CSS
Цветовые модели CMYK и RGB в компьютерной графике
Свойство background-size определяет размер фонового изображения
Что еще нужно знать про CSS background
- Множественные фоны
- Режимы наложения — background-blend-mode
Шестнадцатеричные цвета
Как поменять размер видео в готовом коде
Основные инструменты для задания фона веб-страниц
Полупрозрачный фон
Цвета по названию
Как сделать фон в виде цвета в CSS?
Стажер в отдел продюсерства (продюсер/методист)
Управление позицией фонового изображения
Применение фокуса к цвету текста
Фон на веб-странице
- Добавление фонового рисунка
- Повторение рисунка
Изменяем цвет фона с помощью атрибута BGCOLOR.
Свойство background-blend-mode определяет режим наложения фонового изображения
Полезные советы:

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:

<тег style=»background:имя цвета»>…</тег> — указание цвета фона по имени.

<тег style=»background:#HEX-код»>…</тег> — указание цвета фона по коду.

Пример изменения цвета фона

Результат в браузере

Заголовок.

Параграф.

Жирный текст. Обычный текст.

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

Домашнее задание.

Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи — 22px, а у подзаголовков по 19px.
Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков — #CC3366.
Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).

Как изменить шрифт?

← →

Выравнивание содержимого

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

Как вставить картинку в html. урок

Для любого элемента можно присвоить фоновое изображение с помощью CSS свойства: background-image.

Возможные значения background-image:

url — путь к файлу с изображением.
none — изображение отсутствует. (по умолчанию)

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

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

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»><html><head><title>Фоновое изображение</title><style type=»text/css»>body{background-image: url(fon.jpg);}div{background-image: url(fon1.gif);border: 5px double #245404; height: 250px; }p{text-align: center;color: #008040;font: bold 24px Arial;}</style></head><body><p>Страница с фоновым изображением</p><div><p>Блок с фоновым изображением</p></div></body></html>

смотреть пример

Если рисунок не заполняет собой весь фон элемента, то он выкладывается «плиткой».

Как можно указывать цвет?

Html тег изменения цвета заднего фона текста: атрибут style background-color

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

Раньше в HTML рекомендовалось использовать только безопасную палитру цветов, которая гарантированно отображалась во всех браузерах и на всех мониторах одинаково. Но сегодня ей ограничиваться совершенно не обязательно, так как и браузеры и мониторы давно научились правильно отображать гораздо больший список цветов. А вот указывать цвета по именам я вам как раз и не рекомендую, дело в том, что многие браузеры до сих пор с одним и тем же именем связывают разные цвета. Поэтому в данном учебнике я буду всегда использовать именно HEX-коды цветов.

Как задать цвет текста с помощью CSS?

Как подключить html к css и сделать асинхронную загрузку

На этом с фоном мы покончили и сейчас разберемся с цветом текста. С ним все просто. Он может принимать как значение кода (решетка и код RGB), так и значение словами (например, red – красный, purple – фиолетовый).

 .red { color: red; }
 .purple { color: purple;}

Есть несколько таких слов, которые браузер понимает, но, например, для оттенков таких слов нет. Например, #660066 – оттенок фиолетового цвета и для него нет соответствующего английского слова. Мы можем задать темно-серый цвет с помощью слова gray, но мы не можем задать какой-либо оттенок этого темно-серого цвета. Такого слова просто напросто нет. Поэтому нам нужно указывать код. Также код можно сократить. Если у вас первые два символа, вторые два символа и третьи два символа повторяются, то мы можем сократить каждый второй символ. Код оттенка фиолетового станет трехзначным кодом #606. Это дает браузеру понять, что первые два символа — две шестерки, вторые — два нуля и третьи — тоже две шестерки. Мы сохраним и проверим это сейчас. Ничего с цветом текста не изменилось.

На этом урок можно закончить. Возможно, это была немного трудная тема, но если вы поэкспериментируете, то в итоге будете с ней «на ты». До встречи в следующем видеоуроке, посвященному работе над текстом и его оформлением!

Установка цвета

Цвет, используя CSS, можно задавать тремя способами.

Браузеры поддерживают некоторые цвета по их названию (пример 1).

Пример 1. Установка цвета элемента по его названию

2. По шестнадцатеричному значению

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

Пример 2. Установка цвета элемента по шестнадцатеричному
значению

Также допустимо использовать сокращенную запись, вроде #fc0. Она означает,
что каждый символ дублируется, в итоге получим #ffcc00.

3. С помощью RGB

Можно определить цвет используя значения красной, зеленой и синей составляющей
в десятичном исчислении. Значение каждого из трех цветов может принимать значения
от 0 до 255. Также можно задавать цвет в процентном отношении (пример 3).

Пример 3. Установка цвета элемента по шестнадцатеричному значению

Позиционирование в CSS

Теперь давайте разберемся с позиционированием. Как таковое, позиционирование мы будем разбирать в конце данного видеокурса, сейчас мы научимся лишь позиционировать наше фоновое изображение. Для этого нам нужно указать отступы от верхнего и левого края. Указывать их можно как относительными, так и абсолютными значениями. Что это значит? Есть два типа единиц: относительная и абсолютная. Относительная единица— это пиксели, проценты и др. А абсолютная — это миллиметры, сантиметры. Сначала указывается значение отступа от левого края. Давайте попробуем поставить это значение в 20 пикселей, а потом укажем от верхнего края — 40 пикселей.

 body { background: #33CCFF url(img/bg.jpg) no-repeat fixed 20px 40px;}

Сохраним и посмотрим, как все получилось. Получили два отступа: от левого и верхнего краев.

Если мы укажем значения отступов в абсолютных величинах, т.е. поставим, например, 2см и 4см:

 body { background: #33CCFF url(img/bg.jpg) no-repeat fixed 2cm 4cm;}

то это выглядит соответственно.

Почему абсолютные значения называются абсолютными, а относительные — относительными? Сантиметр одинаков везде, поэтому он называется абсолютным, а проценты зависят, например, от размеров экрана: если на одном экране 10% — это примерно 3см, то на другом это может быть примерно 1см. Абсолютными величинами очень редко пользуются. В основном обходятся именно относительными: пикселями, процентами, есть еще такая буква «m» (величина зависит от буквы m), например:

 body { background: #33CCFF url(img/bg.jpg) no-repeat fixed 30em 20em;}

Это означает «30 букв m в ширину и 20 — в высоту». Сохраняем. Получили желаемое. Такой прием используется в зарубежных странах. В России он используется достаточно редко, хотя бы потому, что буква m – буква английского алфавита.

Есть и другие относительные величины, но используются они совсем редко, поэтому я советую вам обходиться пикселями и процентами. Я делаю именно так.

Значения можно задавать еще и словами: если указать top (верх) и right (право).

 body { background: #33CCFF url(img/bg.jpg) no-repeat fixed top right;}

То есть в верхнем правом углу у нас будет отображаться изображение. Если укажем bottom left:

 body { background: #33CCFF url(img/bg.jpg) no-repeat fixed bottom left;}

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

Цветовые модели CMYK и RGB в компьютерной графике

Прежде чем мы перейдем непосредственно к описанию цветовых моделей компьютерной графики, давайте немного обсудим основные понятия ЦВЕТА. А на видео вы сможете посмотреть где найти и как поменять цветовую модель в фотошопе.

Как мы воспринимаем цвет?

Прежде чем мы перейдем к цветовым палитрам CMYK и RGB, давайте разберемся с тем, как мы воспринимаем цвет. Мы можем видеть предметы только потому, что они излучают или отражают электромагнитное излучение, то есть СВЕТ.

В зависимости от длины волны СВЕТА мы видим тот или иной ЦВЕТ.

Длина волны измеряется в нанометрах.

Каким длинам волн соответствуют 7 цветов радуги?

СВЕТ можно разделить на 2 категории:

Излучаемый свет– это свет, выходящий из источника, например, Солнца, лампочки или экрана монитора.
Отраженный свет– это свет, “отскочивший” от поверхности объекта. Когда мы смотрим на какой-либо предмет, не являющийся источником света, мы видим именно отраженный цвет.

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

Цветовая модель RGB

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

Красный (Red)

Зеленый (Green)

Синий (Blue)

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

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

Как смешиваются основные цвета RGB

Cиний + красный = пурпурный

Зелёный+ красный= жёлтый

Зелёный + синий = циановый

При смешении всех трёх цветовых компонентов мы получаем белый цвет.

Основные цвета палитры RGB

Основные цвета в RGB это: Красный, Синий, Зеленый

Дополнительные цвета палитры RGB

Дополнительные цвета получаются при смешивании двух соседних основных цветов.

К ним относятся: Пурпурный, Голубой, Желтый

Противоположные цвета палитры RGB

При смешивании противоположных цветов получается белый цвет, т.к. составляющими противоположного цвета являются два недостающих цвета (например, Красный + Голубой (синий + зеленый)).

Смешивание 2-х противоположных цветов, это по сути то же самое, что смешивание 3-х основных. В обоих случаях получится белый

Это важно знать каждому, кто всерьез занимается цветовой коррекции

Цветовая модель CMYK

Голубой (cyan)

Пурпурный (magenta)

Желтый (yellow)

Черный (Keycolor)

Cубтрактивная схема формирования цвета, используемая прежде всего в полиграфии. Эта система, в отличие от RGB, используется для печати, поэтому если вы приносите макет в полиграфию, вас, как правило просят предоставлять его именно с использованием цветового режима CMYK.

Как смешиваются цвета CMYK

Голубой + пурпурный = синий цвет, пурпурный + желтый = ярко-красный, желтый + голубой = зеленый.

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

Основные цвета CMYK

Cyan – Голубой, Magenta – Пурпурный, Yellow – Желтый;

Дополнительные цвета CMYK

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

Противоположные цвета CMYK

Голубой – Красный, Желтый – Синий, Пурпурный – Зеленый.

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

Напоминаю, для Вашего удобства я записала в видео формате (вверху статьи)где найти и как поменять цветовую модель в фотошопе

Изучайте цветовые модели CMYK и RGB, а так же компьютерную графику вместе с нами, спасибо за внимание и до новых встреч!. Елена Лебедева, графический дизайнер solla.site, преподаватель компьютерной графики

Елена Лебедева, графический дизайнер solla.site, преподаватель компьютерной графики

Так же Вам будет интересно:

Колористика
Нарисовать логотип. Классификация логотипов
Формальная композиция
Курсы дизайна в Калининграде
Стиль гранж
Футуризм в веб-дизайне
Журнальный стиль сайта
Мультяшный стиль сайта
Ретро стиль в веб-дизайне

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

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

Код CSS

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

– размеры изображения изменяются таким образом, чтобы сохранялись пропорции, ширина или высота равнялась размерам блока;
– размеры изображения изменяются таким образом, чтобы сохранялись пропорции, и изображение полностью поместилось в блок;
– например, если первое значение равно 200px, а второе auto, то высота изображения будет вычисляться автоматически с сохранением пропорций.

Рассмотрим пример:

Код CSS

Что еще нужно знать про CSS background

Множественные фоны

CSS позволяет использовать множественные фоны, т.е для одного элемента можно задать несколько фоновых изображений и/или градиентов.

Это можно делать либо через универсальное свойство :

Либо через отдельные свойства фона

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

В приведенном ниже примере попробуйте изменить размеры основного элемента (потяните за его правый нижний угол).

Режимы наложения — background-blend-mode

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

В CSS можно указывать режим(ы) наложения фонов. Это делается при помощи свойства , которое поддерживается всеми современными браузерами.

Для всех, кто пользуется Фотошопом или Иллюстратором и знаком с режимами смешивания слоев (Blend Modes), это свойство будет очень кстати. Особенно учитывая, что названия режимов смешивания совпадают с названиями в графических редакторах:

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity

Шестнадцатеричные цвета

Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 1 приведено соответствие десятичных и шестнадцатеричных чисел.

Табл. 1. Десятичные и шестнадцатеричные числа меньше 16
Десятичные	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
Шестнадцатеричные	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.

Табл. 2. Десятичные и шестнадцатеричные числа больше 16
Десятичные	16	17	18	19	20	21	22	23	24	25	26	27	28
Шестнадцатеричные	10	11	12	13	14	15	16	17	18	19	1A	1B	1C

Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc.

Типичный цвет, используемый в HTML, выглядит следующим образом.

Здесь цвет фона веб-страницы задан как #fa8e47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (fa) определяют красную составляющую цвета, цифры с третьей по четвертую (8e) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

fa8e47

Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.

Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила

Если значения компонент цвета одинаковы (например: #d6d6d6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #ffffff (белый).
Ярко-красный цвет образуется, если красный компонент сделать максимальным (ff), а остальные компоненты обнулить. Цвет со значением #ff0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00ff00) и синим (#0000ff).
Желтый цвет (#ffff00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 1), где представлены основные цвета (красный, зеленый, синий) и комплиментарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00ffff) получается за счет объединения синего и зеленого цвета.

Рис. 1. Цветовой круг

Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop. На рис. 2 показано окно для выбора цвета в этой программе, линией обведено полученное шестнадцатеричное значение текущего цвета. Его можно скопировать и вставить к себе в код.

Рис. 2. Окно для выбора цвета в программе Photoshop

Как поменять размер видео в готовом коде

Если размер видео, который у вас получился после настройки кода не подошел к вашему сайту (например, вы сменили дизайн и ширина сайдбара у вас уменьшилась) не обязательно идти в Youtube и делать новый код. Можно вручную поменять цифры, отвечающие за ширину и высоту проигрывателя (width=”560″ height=”315″), только пропорции подберите подходящие.

Точно также вы можете руками поправить все характеристики плеера, описанные выше.

На этом у меня все. Удачи.

Основные инструменты для задания фона веб-страниц

Для установки фонового изображения разработчиками веб-языков был предусмотрен атрибут background. Он имеется как в html, так и в css.

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

Однако заметьте! Если в виде фона вы хотите видеть однотонное полотно, заданное значением из палитры цветов, то это делается при помощи атрибута bgcolor.

Цвета в css и html задаются либо английским словом (например, red), либо специальным кодом, который состоит из знака # и шести символов после него (например, #FFDAB9).

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

Полупрозрачный фон

Формат RGBA позволяет задать цвет фона элемента полупрозрачным, тогда сквозь него будет проступать фон веб-страницы. Более заметно и эффектно это выглядит, когда у нас имеется фоновая картинка или узор, а не однотонный цвет. Тогда сквозь фон будет проступать рисунок, но при этом сохранится читаемость текста (рис. 2).

Рис. 2. Полупрозрачный фон

В примере 2 показано использование формата RGBA для создания такого фона.

Пример 2. Формат RGBA

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Фон</title>
<style>
body {
background: url(/example/image/aquaria.jpg); /* Фоновая картинка */
background-size: cover; /* Растягиваем фон */
}
.block {
background: rgba(0,0,0,0.6); /* Полупрозрачный фон */
color: #fff; /* Цвет текста */
padding: 20px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class=»block»>
<h1>Подводный мир</h1>
<p>В глубинах морей и океанов, существует свой, не сравнимый ни с чем ,
удивительный, и не похожий на тот, что окружает нас с вами подводный мир.</p>
</div>
</body>
</html>

Цвета по названию

Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 3 приведены имена популярных названий цветов.

Табл. 3. Названия некоторых цветов
Имя цвета	Описание	Шестнадцатеричное значение
aqua	Голубой	#00ffff
black	Черный	#000000
blue	Синий	#0000ff
fuchsia	Фуксия	#ff00ff
gray	Серый	#808080
green	Зеленый	#008000
lime	Светло-зеленый	#00ff00
maroon	Темно-красный	#800000
navy	Темно-синий	#000080
olive	Оливковый	#808000
purple	Фиолетовый	#800080
red	Красный	#ff0000
silver	Светло-серый	#c0c0c0
teal	Сине-зеленый	#008080
white	Белый	#ffffff
yellow	Желтый	#ffff00

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

Для задания цвета фона мы можем использовать несколько форматов:

1.Кодовое название цвета

PHP

background:blue;

1 backgroundblue;
2.Шестнадцатеричный формат:

PHP

background:# 013C74;

1 background# 013C74;
3.Формат RGBA, позволяющий не только задавать цвет но и регулировать уровень прозрачности фона и таким образом сделать эффект прозрачного фона.

PHP

background:rgba(255,255,255,0.5);

1 backgroundrgba(255,255,255,0.5);

Уровень прозрачности задаётся в виде десятичного значения от 0 до 1, где 0 – полностью прозрачный, а 1 – не прозрачный.

Ранее я уже посвящала несколько статей теме задания цветов, их значений и определению цвета на сайте. Уверена, что они могут вам пригодиться. Вот ссылки:«Изменение цвета шрифта в CSS. Коды цветов HTML и CSS»«Как определить цвет на сайте»«Как в html изменить цвет текста?»

Так же вы можете воспользоваться вот этим инструментом для подбора нужного цвета и определения его кода. Просто водите мышкой по палитре, подбираете цвет и справа отображается его значение в шестнадцатеричном формате (HEX) и в формате rgb.

Стажер в отдел продюсерства (продюсер/методист)

Управление позицией фонового изображения

По умолчанию, фоновое изображение позиционируется в верхнем левом углу элемента, используя CSS свойство background-position мы можем изменить это положение с использованием единиц измерения CSS, либо используя ключевые слова:

Значение	Описание
left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottom	Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет «center»
x% y%	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%.
x y	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения.

Рассмотрим пример использования этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример позиционирования фонового изображения</title>
<style> 
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("smile_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /**/
width: 100px; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin: 10px; /* устанавливаем внешние отступы со всех сторон */
text-align: center; /* выравниваем текст по центру */
line-height: 60px; /* указываем высоту строки */
background-color: azure; /* задаем цвет заднего фона */
}
.leftTop {background-position: left top;} /* задаем позицию ключевыми словами */
.leftCenter {background-position: left center;} /* задаем позицию ключевыми словами */
.leftBottom {background-position: left bottom;} /* задаем позицию ключевыми словами */
.rightTop {background-position: right top;} /* задаем позицию ключевыми словами */
.rightCenter {background-position: right center;} /* задаем позицию ключевыми словами */
.rightBottom {background-position: right bottom;} /* задаем позицию ключевыми словами */
.centerTop {background-position: center top;} /* задаем позицию ключевыми словами */
.centerCenter {background-position: center center;} /* задаем позицию ключевыми словами */
.centerBottom {background-position: center bottom;} /* задаем позицию ключевыми словами */
.userPosition {background-position: 20px 75%;} /* задаем позицию по горизонтали в пикселях, а по вертикали в процентах */
</style>
</head>
	<body>
		<div class = "leftTop">left top</div>
		<div class = "leftCenter">left center</div>
		<div class = "leftBottom">left bottom</div>
		<div class = "rightTop">right top</div>
		<div class = "rightCenter">right center</div>
		<div class = "rightBottom">right bottom</div>
		<div class = "centerTop">center top</div>
		<div class = "centerCenter">center center</div>
		<div class = "centerBottom">center bottom</div>
		<div class = "userPosition">20px 75%</div>
	</body>
</html>

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

Результат нашего примера:

Рис. 117 Пример позиционирования фонового изображения.

Применение фокуса к цвету текста

Параметр lightness в HSL-декларации ведет себя точно так же, превращая все отрицательные значения в 0 (черный цвет, независимо от значений hue и saturation), а все значения больше 100%, соответственно, в 100% (всегда белый).

Таким образом, можно объявить цвет, вычесть сколько нужно из параметра светлоты и умножить на 100%, чтобы получить итоговое значение: либо меньше ноля, либо больше 100%. Поскольку для белого цвета нужны отрицательные значения, а для черного положительные, полученный результат нужно инвертировать, умножив на -1.

:root {
—light: 80;
/* Пороговое значение, отделяющее «светлые» цвета, от «темных». Рекомендуется 50 — 70 */
—threshold: 60;
}

.btn {
/* Если значение lightness меньше порогового, оно превратится в белый,
если больше — в черный */
—switch: calc((var(—light) — var(—threshold)) * -100%);
color: hsl(0, 0%, var(—switch));
}

1
2
3
4
5
6
7
8
9
10
11
12

root{

—light80;

/* Пороговое значение, отделяющее «светлые» цвета, от «темных». Рекомендуется 50 — 70 */

—threshold60;

}

.btn{

/* Если значение lightness меньше порогового, оно превратится в белый,

если больше — в черный */

—switchcalc((var(—light)-var(—threshold))*-100%);

colorhsl(,%,var(—switch));

}

Давайте пройдемся по этому коду.

Мы начинаем со значения светлоты 80 и устанавливаем порог на 60.
Вычитаем одно из другого и получаем 20.
Умножаем на -100%. Итоговый результат равен -2000%, что преобразуется в 0%.

Наш фон светлее порогового значения, поэтому мы считаем его «светлым» и используем черный цвет для текста.

Если бы переменная имела значение 20, то в результате вычислений мы получили бы 4000%, то есть 100%. Для темного фона — белый текст.

Фон на веб-странице

Установка фонового рисунка на веб-страницу традиционно происходит через атрибут
background тега <body>.
Такой рисунок повторяется по горизонтали и вертикали, заполняя таким способом
все окно браузера. Понятно, что особых вариантов для творчества здесь нет, поэтому
обратимся к стилям и посмотрим, что же можно делать с помощью CSS.

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

Добавление фонового рисунка

Добавление рисунка происходит путем установки адреса картинки через ключевое
слово url. Чтобы управлять повторением картинки
применяются аргументы no-repeat (нет повторения),
repeat-x (повторение по горизонтали) и repeat-y
(повторение по вертикали). Благодаря этому можно получить веб-страницу, приведенную
на рис. 1.

Рис. 1. Фоновая картинка без повторения

Чтобы установить картинку на веб-страницу, следует добавить стилевое свойство background
к селектору BODY, как показано в примере 1.

Пример 1. Фоновый рисунок

В данном примере графический рисунок target.gif определяется как фон веб-страницы
без повторения изображения. Чтобы картинка не прилегала плотно к краям браузера,
она смещается на 30 пикселов вправо и на 20 пикселов вниз от своего исходного
положения.

Повторение рисунка

Благодаря тому, что можно задавать повторение фонового рисунка по горизонтали
или вертикали, доступно несколько вариантов оформления веб-страниц. Например,
для создания вертикальной полосы по левому краю (рис. 2) понадобится изображение,
показанное на рис. 3.

Рис. 2. Повторение рисунка по вертикали

Рис. 3. Картинка для создания фона

Рисунок должен быть таким, чтобы по вертикали он состыковывался между собой
без заметных швов, а также составлял единое целое с заданным цветом фона веб-страницы.
В примере 2 приводится создание такого фонового рисунка, опять же с помощью
свойства background и его значения repeat-y.

Пример 2. Повторение фона по вертикали

Аналогично можно делать повторение фона по горизонтали, например, создав градиент
и установив его в качестве фоновой картинки (рис. 4).

Рис. 4. Использование градиента в качестве фона

Чтобы получить веб-страницу, приведенную на рис. 4, потребуется вначале
сделать картинку с градиентным переходом. Ширину достаточно указать 20-40 пикселов,
а высота рисунка зависит от цели документа и предполагаемой высоты содержимого
веб-страницы. Не стоит также забывать, что рисунок большого размера приведет
к увеличению объема графического файла. А это отрицательно скажется на скорости
его загрузки и, в конечном итоге, приведет к замедлению отображения фона. Для данного
случая вполне подошла картинка размером 30х200 пикселов (рис. 5).

Рис. 5. Градиентное изображение для создания фона

В примере 3 показан код HTML для создания градиентного фона.

Пример 3. Повторение фона по горизонтали

Градиентный рисунок хорошо сочетается с одноцветным блоком, поэтому в данном
примере добавляется слой, в котором и отображается содержимое веб-страницы.

Изменяем цвет фона с помощью атрибута BGCOLOR.

При помощи атрибута BGCOLOR, который тоже размещается в теге <body>, можно задать цвет фона HTML страницы.

Цвет задается в виде цифрового кода:

или обычным названием цвета:

Вот пример:

<html>
<head>
<title>Изменяем цвет фона с помощью атрибута BGCOLOR</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#000000" text="green">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Или вот так:

<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body bgcolor="green" text="#000000">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Свойство background-blend-mode определяет режим наложения фонового изображения

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

Стоит обратить внимание на версии браузеров, с которых начинается поддержка свойства , например, Internet Explorer не поддерживает его вовсе. Рассмотрим синтаксис:

Код CSS

Расшифруем все эти значения. Я не расписывал их, так как это достаточно сложно описать, поэтому каждое значение лучше рассмотреть экспериментальным путем, так будет понятнее.

– Обычный. Режим по умолчанию.
– Умножение.
– Осветление.
– Перекрытие.
– Темнее.
– Светлее.
– Осветление основы.
– Затемнение основы.
– Направленный свет.
– Рассеянный свет.
– Разница.
– Исключение.
– Тон.
– Насыщенность.
– Цвет.
– Яркость.

Далее пример использования свойства:

Код CSS

Полезные советы:

При использовании изображения в качестве фона с помощью свойства background-image заодно заливайте фон альтернативным цветом с помощью background-color. Так если, по каким либо причинам, не загрузится фоновое изображение или же пользователь умышленно отключит в настройках браузера загрузку рисунков, фон элемента не останется «голым».
Не используйте большие весом «мегабайтные» изображения берегите время деньги и нервы пользователей.. А если уж без этого не обойтись, то перед тем как выкладывать такие изображения, как следует, поработайте с ней в графических редакторах на предмет «лишнего веса». Почти всегда можно значительно сжать картинку особо не проиграв в качестве изображения.