Css и множественный фон

Его высочество background

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

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

Бесплатные способы обучения веб-дизайну (книги, платформы и YouTube-каналы)

Полезные YouTube-каналы

• Бесплатный мастер-класс «Веб-дизайн с нуля до первых работ за 1 день» — этот урок будет полезен тем, кому нужно заложить основы веб-дизайна как можно быстрее.
• Уроки по Веб-дизайну — 86 бесплатных видеоуроков в удобном плейлисте от Highlights School
• Sofiya Filippova — опытная веб-дизайнер Софья ведёт очень интересный блог об этой профессии
• Хауди Хо — Просто о мире IT! — полезный канал не только о веб-дизайне, но и об IT-технологиях в целом.
• Гоша Дударь — тоже популярный автор, на его канале мы нашли 3 горячих плейлиста с уроками: HTML 5 для начинающих, Создание сайта на CSS и HTML и Уроки по Bootstrap.

Годные книги

Отмечу, что не стоит воспринимать книги по веб-дизайну как самую важную информацию при обучении.

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

• «Дизайн для реального мира» от Виктора Папанека
• «Живая типографика» от Александра Королькова
• «Веб-дизайн. Элементы опыта взаимодействия» от Джесса Гарретта
• «Не заставляйте меня думать» от Стива Круга
• «Сначала мобильные» от Люка Вроблевски

Базы знаний и платформы обучения

• Бесплатный курс «Создание Landing Page» от Tilda
• Duolingo (учите английский язык, чтобы работать не только в России)
• HTMLbook
• Основы веб-дизайна от GeekBrains
• Бесплатные курсы по веб-дизайну от Coursera

Свойство background-repeat устанавливает повторение фона

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

Код CSS

Свойство принимает 6 значений:

1. – Фоновое изображение повторяется как по вертикали, так и по горизонтали. Последнее изображение будет обрезано, если оно не помещается. Это по умолчанию;
2. – Фоновое изображение повторяется только по горизонтали;
3. – Фоновое изображение повторяется только по вертикали;
4. – Фоновое изображение не повторяется. Изображение будет показано только один раз;
5. – Фоновое изображение повторяется в максимально возможной степени без отсечения. При необходимости добавляются свободные пространства между изображениями;
6. – Фоновое изображение повторяется и сжимается или растягивается, чтобы заполнить пространство (без пропусков);

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

Код CSS

CSS Multiple Backgrounds

CSS allows you to add multiple background images for an element, through the
property.

The different background images are separated by commas, and the images are
stacked on top of each other, where the first image is closest to the viewer.

The following example has two background images, the first image is a flower
(aligned to the bottom and right) and the second image is a paper background (aligned to the top-left corner):

#example1 {  background-image: url(img_flwr.gif), url(paper.gif);  background-position: right bottom, left top;  background-repeat: no-repeat, repeat;}

Multiple background images can be specified using either the individual
background properties (as above) or the shorthand property.

The following example uses the shorthand property (same result as
example above):

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

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

• no-repeat — фон не повторяется; применяется для простого добавления единственной картинки;
• repeat-x — фон повторяется по горизонтали;
• repeat-y — фон повторяется по вертикали.

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

• занимать по высоте не меньше 20–30 пикселей;
• при стыковке с аналогичным фрагментом изображения по вертикали не должно быть видимых стыков.

Поясним про высоту фоновой картинки. Если сделать изображение слишком узким (2–3 пикселя), то при отображении фона эффект его появления будет виден невооружённым глазом. Увеличение высоты позволяет замостить фон элемента быстро и незаметно.

В качестве образца фона возьмём узор, показанный на рис. 2.

Рис. 2. Фоновая картинка

В примере 2 показано добавление фона на веб-странице с повторением его по вертикали. Чтобы текст не выводился поверх рисунка к селектору body добавлено поле слева.

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

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Повторение фона</title>
<style>
body {
padding-left: 80px; /* Поле слева */
background:
url(/example/image/pattern-left.png) repeat-y; /* Путь к графическому файлу и
повторение фона по вертикали */
}
</style>
</head>
<body>
<p>Человек должен уметь иногда посмеяться над собой, иначе
он сойдёт с ума. Об этом, к сожалению, знают немногие,
поэтому в мире так много сумасшедших.</p>
<p>Рафаэль Сабатини</p>
</body>
</html>

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

Рис. 3. Вид фона, повторяющегося по вертикали

Аналогично делается и повторение по горизонтали. Предварительно готовим подходящее изображение, затем добавляем его фоном к элементу через background и включаем повторение repeat-x (пример 3).

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

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Повторение фона</title>
<style>
.strip {
background: url(/example/image/strip.png) repeat-x; /* Параметры фона */
border-radius: 10px; /* Радиус скругления */
height: 30px; /* Высота элемента */
}
</style>
</head>
<body>
<div class=»strip»></div>
</body>
</html>

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

Рис. 4. Вид фона, повторяющегося по горизонтали

Универсальное свойство background

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

Существует более простой метод задать значения всех свойств для работы с задним фоном в одном объявлении, используя универсальное свойство background.

Свойство background имеет следующий синтаксис:

background: "color image position/size repeat origin clip attachment;

Где значения соответствуют вышерассмотренным нами свойствам:

• background-color (color | transparent).
• background-image (url | none).
• background-position (значение).
• background-size (auto | length | cover | contain).
• background-repeat (repeat | repeat-x |repeat-y | no-repeat).
• background-origin (padding-box | border-box | content-box).
• background-clip (border-box | padding-box | content-box).
• background-attachment (scroll | fixed | local).

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

Пример использования универсального свойства background

И так, что мы сделали в этом примере:

• Мы установили для элементов <html> и <body> высоту 100%, убрали внутренние и внешние отступы.
• Для элемента <header> задали минимальную высоту равную 34% от родительского элемента, ширину установили 100%. В качестве заднего фона установили изображение — url(‘cat_g.jpg’), позиционировали его по низу и масштабировали фоновое изображение под размеры элемента (center / contain — background-position / background-size). Без косой черты, как и без позиции фонового изображения работать не будет.
• Для элемента <div> с классом .primer2 задали минимальную высоту равную 66% от родительского элемента, ширину установили 100%. В качестве заднего фона установили два различных изображения, позиционировали их по центру (center) и масштабировали их (первое изображение полностью помещается — значение contain, второе изображение масштабируется под размеры элемента cover ).

Результат нашей работы:

Рис. 122 Пример использования универсального свойства background.

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

Подробное изучение позиционирования элементов будет освещено далее в учебнике в статье «Позиционирование элементов в CSS».

Геометрическое представление

Цветовая модель RGB, сопоставленная с кубом. Горизонтальная ось X показывает, как красные значения увеличиваются влево, ось Y показывает, как синий увеличивается вправо, а вертикальная ось Z показывает, как зеленый цвет увеличивается кверху. Начало координат, черный — это вершина, скрытая от глаз.

См. Также цветовое пространство RGB

Поскольку цвета обычно определяются тремя компонентами, не только в модели RGB, но также и в других цветовых моделях, таких как CIELAB и Y’UV , среди прочих, трехмерный объем описывается путем обработки значений компонентов как обычных декартовых координат. в евклидовом пространстве . Для модели RGB это представлено кубом, использующим неотрицательные значения в диапазоне 0–1, с присвоением черному цвету начала координат в вершине (0, 0, 0) и с увеличивающимися значениями интенсивности, проходящими по трем осям вверх. к белому в вершине (1, 1, 1), по диагонали напротив черного.

Триплет RGB ( r , g , b ) представляет трехмерные координаты точки данного цвета внутри куба или его граней или вдоль его краев. Этот подход позволяет вычислять цветовое сходство двух заданных цветов RGB, просто вычисляя расстояние между ними: чем короче расстояние, тем выше сходство. Out-of цветовой гаммы вычисления также могут быть выполнены таким образом.

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

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

Значения цвета RGB поддерживается во всех основных браузерах и задается в следующем порядке: R (красный), G (зеленый), B (синий).
Чтобы указать значение в системе RGB необходимо использовать следующий синтаксис:

селектор {
color : rgb(R,G,B);
}

Каждый параметр определяет интенсивность цвета и может быть целым числом от 0 до 255. Например, значение rgb(0,0,255); отображается как синий цвет, так как параметр синего установлен в максимальном значении (255), а красный и зелёный установлены в (минимальное значение):

p {
color : rgb(0,0,255); /* задаём синий цвет для всех абзацев */
}

Хочу заранее обратить Ваше внимание на то, что допускается указывать значения цвета RGB в виде процентных соотношений. Мы с Вами подробно рассмотрим какие единицы измерения существуют и используются в CSS в следующей статье «Единицы измерения CSS, размер шрифта».
Например, чтобы задать оранжевый цвет для всех заголовков второго уровня, используя систему RGB и процентные значения, необходимо использовать следующие значения параметров:

h2 {
color : rgb(100%,65%,0%); /* задаёт оранжевый цвет для всех заголовков второго уровня */
}

Рассылка приглашений в группу в ВК

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

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

Практическое задание № 12.

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

Работа со шрифтами в CSS

Единицы измерения CSS,
размер шрифта

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Цветовые модели HSL и HSLA

К еще одному методу задания цвета в CSS относится система HSL, её можно значительно реже встретить на страницах сайтов. HSL это аббревиатура, которая объединяет в себе первые буквы трех следующих признаков:

• Hue — тон.
• Saturation — насыщенность.
• Lightness — осветленность.

Система HSL использует следующий синтаксис:

hsl(от 0° до 360°, от  до 100%, от 0% до 100%), где:

Первое значение – это тон, который указывается в градусах от 0° до 360°. Градусы соответствуют цвету на круге оттенков (изображенном ниже):

Рис. 48 Круг оттенков, применяемый при задании цвета с использованием HSL.

Красный цвет соответствует значениям — 0° и 360°, желтый — 60°, зеленый — 120°, голубой — 180°, синий — 240°, фиолетовый — 300° и так далее.

Второе значение (насыщенность) — определяет, насколько чистым является цвет и указывается в процентах от 0% до 100%, где 0% — полное отсутствие насыщенности (тусклый серый), а 100% это чистый и яркий цвет.

Третье значение (осветленность) — указывается в процентах от 0% (полностью черный) до 100% (полностью белый), среднее значение 50% даёт чистый цвет.

Давайте рассмотрим пример задания цвета с помощью системы HSL на примере красного цвета (значение тона 0°):

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Применение HSL в CSS</title>
<style> 
div {
display : inline-block; /* выстраиваем элементы <div> в линейку, как строчные элементы */
width : 60px; /* устанавливаем ширину для всех <div> элементов */
height : 60px; /* устанавливаем высоту для всех <div> элементов */
}
.test1  {
background-color : hsl(0, 10%, 50%); /* 0 – соответствует красному цвету, 10% - насыщенность, 50%- осветленность (соответствует чистому цвету) */
}
…  /* и так до десятого блока с шагом 10% (увеличение насыщенности) */
.test10  {
background-color : hsl(0, 100%, 50%); /* насыщенность 100% (чистый и яркий цвет) */
}
.test11  {
background-color : hsl(0, 100%, 10%); /* 0 – соответствует красному цвету, 100% - насыщенность (чистый и яркий цвет), 10%- осветленность  */
}
…  /* и так до двадцатого блока с шагом 10% (увеличение осветленности)*/
.test20  {
background-color : hsl(0, 100%, 100%); /* как вы можете заметить осветленность 100% дает белый цвет */
}
</style>
</head>
	<body>
		<div class = "test1"> hsl(0, 10%, 50%)</div>
		…/* и так до десятого блока */
		<div class = "test10"> hsl(0, 100%, 50%)</div>
		<br>/* переводим строку */
		<div class = "test11" style = "color:white">hsl(0, 100%, 10%)</div> /* добавляем внутренний стиль для элемента (цвет текста белый) */
		…/* и так до двадцатого блока */
		<div class = "test10"> hsl(0, 100%, 100%)</div>
	</body>
</html> 

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

Рис. 49 Пример задания цвета с помощью HSL в CSS.

По аналогии с RGB, HSL поддерживает прозрачность с помощью добавления альфа канала, который задает уровень прозрачности со значениями от до 1 (от невидимого до полностью непрозрачного).

Данный формат задания цвета в CSS называется HSLA, давайте рассмотрим его применение на примере фиолетового цвета (значение тона 300°):

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Применение HSLA в CSS</title>
<style> 
div {
display : inline-block; /* выстраиваем элементы <div> в линейку, как строчные элементы */
width : 60px; /* устанавливаем ширину для всех <div> элементов */
height : 60px; /* устанавливаем высоту для всех <div> элементов */
}
.test1  {
background-color :  hsla(300, 100%, 50%,.1); /* фиолетовый цвет со 100% насыщенностью и 50% осветлённостью с добавлением альфа-канала, который задает уровень прозрачности */
}
…/* и так до десятого блока с шагом 0.1 */
.test10  {
background-color :  hsla(300, 100%, 50%, 1); /* альфа-канал полностью непрозрачный */
}
</style>
</head>
	<body>
		<div class = "test1">hsla(300, 100%, 50%,.1)</div>
		…
		<div class = "test10">hsla(300, 100%, 50%, 1)</div>
	</body>
</html> 

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

Рис. 50 Пример задания цвета с помощью HSLA в CSS.

Фиксированный задний фон

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

Давайте с Вами рассмотрим, как с помощью свойства background-attachment сделать «параллакс» эффект.

<!DOCTYPE html>
<html>
<head>
	<title>Пример фиксированного фонового изображения</title>
<style> 
div {
height: 600px; /* устанавливаем высоту элемента */
}
.primerFixed {
background-image: url('nich.jpg'); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-attachment: fixed; /* указываем, что задний фон будет зафиксирован */
background-position: center; /* центрируем задний фон */
background-repeat: repeat-x; /* фоновое изображение будет повторяться по горизонтали */
}
</style>
</head>
<body>
	<div></div>
	<div class = "primerFixed"></div>
	<div></div>
</body>
</html>

В данном примере для всех элементов <div> мы установили высоту равную 600px и разместили три таких блока на странице. Для среднего блока мы создали класс .primerFixed, который задает для элемента фиксированный задний фон элемента, центрирует его и тиражирует по горизонтали (ось x). Для демонстрации эффекта «параллакс» откройте пример в отдельном окне браузера и прокрутите страницу вниз.

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

Рис. 118 Пример фиксированного фонового изображения.

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

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

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

<!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 Пример позиционирования фонового изображения.

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

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

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

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

RGBA Colors

RGBA color values are an extension of RGB color values with an alpha channel — which specifies the opacity
for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0
(fully transparent) and 1.0 (fully opaque).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

The following example defines different RGBA colors:

Example

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red
with opacity */#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue
with opacity */