Урок 9 из 26
В прогрессе

9)Изображение

  • Ширина

  • Как добавить изображения в HTML документ

  • Как добавить изображения в CSS документ


Свойства ширины

Начать обсуждение хотелось бы со свойств, связанных с шириной. У нас есть min-width и max-width, и каждое из них крайне важно и полезно в определённых ситуациях.

Минимальная ширина (min-width)

Своство min-width предназначено для предотвращения уменьшения ширины элемента ниже заданного значения. Значением по умолчанию является auto, которое может доходить до 0.

Максимальная ширина (max-width)

Свойство max-width предназначено для предотвращения увеличения ширины элемента выше заданного значения. Значение по умолчанию – none.

Если к изображению применить свойство max-width: 100% оно останется в границах родительского элемента, даже при том, что его изначальный размер больше. Если же изображение изначально меньше родителя, данное свойство никак на него не повлияет.

Использование min-width и max-width

Если значение min-width больше, чем max-width, оно будет принято за ширину элемента.

Свойства высоты

В дополнение к свойствам минимальной и максимальной ширины, есть такие же свойства для высоты

Минимальная высота (min-height)

Свойство min-height предназначено для предотвращения уменьшения высоты элемента ниже заданного значения. Значением по умолчанию является auto, которое может доходить до 0.

Максимальная высота (max-height)

Свойство max-height предназначено для предотвращения увеличения высоты элемента больше заданного значения. Значением по умолчанию является none.


object-fit

Свойство object-fit определяет, как содержимое заменяемого элемента, такого как <img> или <video>, должно заполнять контейнер относительно его высоты и ширины.

Значения

fill
Смещаемый контент меняет свой размер таким образом, чтобы заполнить всю область внутри блока: используется вся ширина и высота блока.
contain
Смещаемый контент меняет свой размер таким образом, чтобы подстроиться под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определён как «помещённый внутрь» блока, ограничиваясь его шириной и высотой.
cover
Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определён как «покрытие» блока, ограничиваясь его шириной и высотой.
none
Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определён с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.

Добавляем изображения на WEB-страницу

 

· Как разместить изображения в HTML документ

<img src=»адрес» alt=»текст» /> — КЛИК
width — ширина — КЛИК
height — высота — КЛИК

Какие атрибуты бывают у тэг img:

src — путь до картинке

alt — текст

title — подсказка

<figure>: Элемент иллюстрации с необязательной подписью

HTML-элемент <figure> (Иллюстрация с необязательной подписью) представляет самостоятельный контент, часто с подписью (заголовком), которая указывается с помощью элемента (<figcaption>). Диаграмма и её подпись представляет собой единое целое.


· Как разместить изображения в CSS документе

background-image: url(<адрес>) — КЛИК

Порядок записи значений background

Свойство background объединяет все свойства для фона. Вы можете перечислить в нем значения для:

  • background-image
  • background-position
  • background-size (CSS3)
  • background-repeat
  • background-attachment
  • background-origin (CSS3)
  • background-clip (CSS3)
  • background-color

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


Синтаксис сокращенного свойства background CSS

Как видно на рисунке, мы пишем значения всех свойств через пробел как обычно. Исключением являются свойства background-position и background-size — их необходимо разделять знаком слэша /.

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

background-image: none;
background-position: 0% 0%;
background-size: auto;
background-repeat: repeat;
background-attachment: scroll;
background-origin: padding-box;
background-clip: border-box;
background-color: transparent;

Свойство background-color для установки фонового цвета

Для обозначения фонового цвета элемента используется свойство background-color. По умолчанию все элементы имеют прозрачный фон. Рассмотрим синтаксис:

Код CSS
background-color: цвет | transparent;    

Значение transparent устанавливает прозрачный фон. Под понятием «цвет» может быть запись цвета в допустимом формате для CSS. Допустимыми форматами являются: шестнадцатеричный код, название цвета, RGB, RGBA, HSL, HSLA. Далее пример, где используется три формата записи черного цвета:

Код CSS
div {
    background-color: #000;
} 
div {
    background-color: rgb(0, 0, 0);
}
div {
    background-color: black;
}    

Свойство background-image для установки фонового изображения

Свойство background-image используется для установки фонового изображения. Позволительно устанавливать несколько изображений фона, перечисляя их через запятую. Если установлен цвет фона при помощи свойства background-color, то он (цвет) будет отображаться до тех пор, пока загружается фоновое изображение или в случае его недоступности. Рассмотрим синтаксис:

Код CSS
background-image: url|none;    

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

  1. url – URL-адрес изображения. Чтобы указать несколько изображений, разделите URL-адреса запятой;
  2. none – фоновое изображение не будет отображаться. Оно по умолчанию;
  3. linear-gradient() – устанавливает линейный градиент в качестве фона. Определите как минимум два цвета (сверху вниз);
  4. radial-gradient() – устанавливает радиальный градиент в качестве фонового изображения. Определите как минимум два цвета (от центра до краев);
  5. repeating-linear-gradient() – повторяет линейный градиент;
  6. repeating-radial-gradient() – повторяет радиальный градиент.

Пример:

Код CSS
body {
    background-image: url("bg.jpg");
}    

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

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

Код CSS
background-attachment: fixed | local | scroll | initial | inherit;    

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

  1. scroll – фоновое изображение будет прокручиваться вместе со страницей. Оно установлено по умолчанию.
  2. fixed – фоновое изображение не будет прокручиваться вместе со страницей.
  3. local – фоновое изображение будет прокручиваться вместе с содержимым элемента.
  4. initial – устанавливается значение по умолчанию.
  5. inherit – наследует значение свойства родителя.
Код HTML
<div style = "height: 3000px">
    Какой-то текста
</div> 
Код CSS
body {
    background-image: url("bg.png"); /* Путь к изображению, которое используется для фона*/
    background-attachment: fixed; /* Фон прокручиваться не будет */
}    

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

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

Код CSS
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;

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

  1. normal – Обычный. Режим по умолчанию.
  2. multiply – Умножение.
  3. screen – Осветление.
  4. overlay – Перекрытие.
  5. darken – Темнее.
  6. lighten – Светлее.
  7. color-dodge – Осветление основы.
  8. color-burn – Затемнение основы.
  9. hard-light – Направленный свет.
  10. soft-light – Рассеянный свет.
  11. difference – Разница.
  12. exclusion – Исключение.
  13. hue – Тон.
  14. saturation – Насыщенность.
  15. color – Цвет.
  16. luminosity – Яркость.

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

Код CSS
div { 
  width: 500px;
  height: 500px;
  background-image: url("bg.jpg"), url("superimposed.png");
  background-blend-mode: darken;
}    

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

Фон может отображаться под границами, внутри их или внутри контента. Чтобы это реализовать, необходимо использовать свойство background-clip. Как ранее было обозначено, оно принимает три значения:

  1. border-box – фон будет отображаться под рамкой;
  2. padding-box – фон будет отображаться внутри рамки;
  3. content-box – фон будет отображаться внутри контента.

Синтаксис свойства background-clip:

Код CSS
background-clip: [border-box |padding-box | content-box];    

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

Код CSS
.clip {
    background: #f1f1f1;
    border: 20px dotted #000000;
    background-clip: border-box;
    padding: 10px;
    height: 50px;
}    

Свойство background-origin для позиционирования фона

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

  1. border-box – позиционирование фона осуществляется относительно границы;
  2. padding-box – позиционирование фона осуществляется относительно края элемента, при чем толщина границы учитывается;
  3. content-box – позиционирование фона осуществляется относительно содержимого элемента;

Синтаксис свойства background-origin:

Код CSS
background-origin: [border-box |padding-box | content-box];    

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

Код CSS
.origin {
    background: url("img.jpg") no-repeat;
    background-origin: content-box;
    border: 10px solid #000;
    padding: 10px;
    height: 100px;
}    

Свойство background-position для определения начального положения фона

С помощью свойства background-position достаточно просто устанавливается начальное положение фона. Это свойство имеет два значения, которые могут быть заданы ключевым словом, в процентах или в иных значениях допустимых в CSS. Первое значение определяет положение по горизонтали (leftcenterright), второе – по вертикали (topcenterbottom). Через запятую можно указывать значения для нескольких фонов. Синтаксис свойства background-position следующий:

Код CSS
background-position: значение1 значение2;    

При указании одного ключевого слова, второе будет равно center. Комбинации ключевых слов могут быть следующими:

  1. left top
  2. left center
  3. left bottom
  4. right top
  5. right center
  6. right bottom
  7. center top
  8. center center
  9. center bottom

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

Код CSS
body {
    background-image: url(bg.jpg); 
    background-position: 50% 50%;
}    

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

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

Код CSS
background-repeat: значение;    

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

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

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

Код CSS
body { 
    background-image: url(bg.jpg); 
    background-repeat: repeat; 
}    

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

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

Код CSS
background-size: значение1 значение2;    

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

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

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

Код CSS
div {
    background: url(bg.jpg); 
    background-size: cover;   
}    

Практика она же домашняя работа.

 

  1. создать сайт  1— КЛИК
  2. создать сайт  2— КЛИК
  3. создать сайт  3— КЛИК
  4. ссылку скинуть в дискорд

Самостоятельная работа:

background gradient