0:00
Здравствуйте.
В этом видео я расскажу вам, как вставлять изображения при помощи HTML и CSS.
Для того, чтобы вставить изображение в HTML, нужно воспользоваться элементом img
и в качестве значения атрибута src указать ссылку на картинку.
Также очень важно указывать размеры картинки.
При загрузке страницы происходит отрисовка,
и если указаны размеры, то размер под картинку будет зарезервирован.
Если их не указать, то когда загрузится картинка,
вся страница может перерисоваться.
Ну и также не забывайте про атрибут alt: если туда нечего написать,
то лучше его оставить пустым.
Как вставить изображение при помощи CSS?
Можно воспользоваться свойством background-image.
Используя функцию url, можно указать ссылку на картинку.
В данном случае изображение имеет размер 250 на 250 пикселей,
а блок размером 200 на 200, поэтому картинка вылазит за его границы.
Для того, чтобы контролировать размеры фона,
можно воспользоваться свойством background-image.
Если мы зададим одно значение, то это то же самое,
что мы установим background-size: 100% auto.
То есть по ширине будет занимать 100 % от блока,
а высота рассчитается пропорционально.
В этом случае, так как блок имеет размер 200 на 200, то по ширине картинка войдет.
И так как картинка квадратная, сожмется она пропорционально.
Если мы увеличим блок, то картинка соответственно увеличится.
Если мы укажем два значения, например,
background-size: 100% 100%, то при изменении размеров блока картинка
начнет сжиматься и сжиматься не пропорционально.
У background-size есть специальные ключевые слова cover и contain.
Значение cover попытается покрыть картинкой все пространство,
а значение contain обозначает, что картинка должна содержаться в блоке.
Итак, первый блок.
У него установлено значение cover, то есть элемент увеличивался до тех пор,
пока он не стал заполнять все пространство.
А у второго блока мы видим, что картинка пытается вместиться,
то есть принимает минимальные значения от ширины и высоты.
В данном случае ширина меньше,
поэтому ширина изображения подстраивается под ширину блока.
И если мы будем менять размеры, то видим,
что в первом случае картинка пытается заполнить все пространство,
а во втором случае она всегда пытается находиться целиком в этом блоке.
Как вы уже заметили ранее, картинки повторяются.
Это можно контролировать при помощи свойства background-repeat.
По умолчанию установлено значение repeat.
Также есть значения no-repeat,
повторять только по оси x и повторять только по оси y.
По умолчанию выглядит это вот так, затем не повторять,
то есть картинка рисуется один раз, повторять по оси x — повторяется
только вдоль оси x, и повторять по оси y — повторяется только сверху вниз.
Для того, чтобы контролировать положение фона,
можно использовать свойство background-position.
У него есть две координаты, это по оси x и по оси y.
Также можно использовать значение в процентах,
в пикселях или ключевые слова: left, center, right, bottom или top.
В случае, если мы укажем background-position: 100% 100%,
то фон прижмется правым краем к правому краю, а нижним краем — к нижнему краю.
Давайте посмотрим.
Итак, движется элемент направо, 100%, 100%,
потом 0 100% и 0 0.
Итак, получается, что если мы указываем 100% по оси x,
то элемент не выходит за границы, а просто прижимается к правому краю.
Такие особенности у свойства background-position.
Свойство background-attachment позволяет зафиксировать фон.
Оно принимает три значения: scroll, fixed или local.
Значение scroll обозначает, что изображение будет зафиксировано,
если контент самого элемента будет прокручиваться.
Значение fixed обозначает, что фон не будет прокручиваться ни в каком случае,
даже если будет прокручиваться весь контент.
Значение local обозначает,
что картинка будет прокручиваться вместе со всем контентом.
Посмотрим пример.
Вот мы проскралливаем всю страницу и видим, что центральное изображение,
которое background-attachment: fixed, оно не прокручивается.
А значение background-attachment: local прокручивается вместе со
всем своим контентом.
При помощи ключевого слова currentColor можно задавать цвет переднего плана.
Например, мы хотим, чтобы цвет фона и цвет тени был
цветом текущего цвета, то есть мы указываем цвет красный, затем,
используя ключевое слово currentColor, указываем его в background и в box-shadow.
И видим, что цвет установился тот, который указан в свойстве currentColor.
При помощи свойства background-origin можно определять область позиционирования
фонового рисунка.
Что это значит?
Можно указывать, чтобы фон был под паддингом,
под бордером или заполнял только лишь ту часть, которая является контентом.
Мы указываем свойство background-origin со значением border-box,
и в этом случае картинка заползает под бордер.
Если мы указываем padding-box, то картинка находится под паддингом.
В данном случае отступы имеют размер 20 пикселей,
ну и изображение находится под ними.
Если мы указываем значение content-box,
то с учетом всех паддингов изображение устанавливается только в контентной части.
Чтобы не писать большое количество свойств,
можно воспользоваться короткой записью, используя свойство background.
В качестве функции url мы передаем ссылку, далее указываем позицию,
через слэш указываем размер изображения, дальше указываем,
повторяется это изображение или нет, и в самом конце мы можем указать цвет.
Но цвет фона мы можем также указать в самом начале.
И в браузере это будет выглядеть вот так, как на картинке ниже.
В этом видео вы узнали, как добавить изображение при помощи HTML и CSS,
а также какие свойства существуют для управления фоновыми изображениями.
В следующей лекции я расскажу вам о линейных и радиальных градиентах.
Олег Семичевразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Мохов Олегразработчик интерфейсов, Яндекс
