Рамки и фоны, часть 2 / Границы фона [4/33]
×

Границы фона [4/33]

Ещё одно фоновое свойство — background-origin. Оно задаёт расположение и размеры области отображения фонового изображения и принимает три значения: padding-box, border-box и content-box.

Значение по умолчанию — padding-box. При этом значении область отображения фонового изображения соответствует внутренней области блока, не включая рамки.

При content-box область отображения соответствует только области содержимого, не включая рамки и внутренние отступы.

При border-box область отображения соответствует полному размеру блока, включая и рамки. Фоновое изображение начинается от внешнего края блока и закрывается рамками, если они заданы.

Хотите верстать адаптивно, использовать БЭМ и LESS? Тогда записывайтесь на наш продвинутый интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Границы фона</title> <meta charset="utf-8"> <base href="/assets/course88/"> <link href="style.css" rel="stylesheet"> </head> <body class="set"> <div class="portrait"></div> <div class="portrait portrait-content-box"></div> <div class="portrait portrait-border-box"></div> </body> </html>
CSS
.portrait { width: 200px; height: 200px; padding: 20px; box-sizing: border-box; border: 20px solid rgba(255, 255, 0, 0.4); background: url("img/keks.jpg") no-repeat #ffffff; background-origin: padding-box; background-size: 100% 100%; }
HTML Academy
  1. Портрету .portrait-content-box задайте границы фона content-box,
  2. а затем портрету .portrait-border-boxborder-box.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

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

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.