02.03.2020
Продолжаем изучать свойства CSS, описывающие цвет и фон объекта. На этом занятии мы познакомимся со свойством «background-attachment». Это свойство CSS отвечает за блокировку фонового изображения. Что это такое? Наверняка вы встречали в Сети сайты, на которых болтаются навязчивые рисунки или баннеры, которые остаются на месте, куда бы вы не передвигали полосу прокрутки. Этот эффект как раз и достигается применением этого свойства. Хотите провести аудит репутации сайта, тогда смело обращайтесь к грамотным специалистам в данной области на сайте https://serm.moscow. На данном сайте вы сможете найти всю подробную и важную информацию, также есть уникальная возможность заказать бесплатный аудит репутации, помимо этого вы познакомитесь со всеми услугами профильной компании.
Свойство «background-attachment» имеет два значения:
Background-attachment, fixed - изображение блокировано (при прокрутке остается на месте). Пример 9-1, для примера я приготовил воздушный шар, на котором мы и будем экспериментировать. Открываем нашу таблицу стилей CSS и прописываем новый стиль для тега body. В первой строчке указываем фоновый цвет – белый, во второй - сообщаем браузеру адрес фонового рисунка, в третьей - запрещаем повторять рисунок, в четвертой строчке приказываем зафиксировать фоновый рисунок на месте. Теперь при прокрутке шарик должен оставаться на месте.
Сохраняем файл style. css и смотрим, что у нас получилось:
- Браузер все сделал правильно, расположив фоновый рисунок в левом верхнем углу.
- По умолчанию, он так и должен был поступить.
Давайте теперь передвинем полосу прокрутки и посмотрим, что будет. Можете убедиться, что при скроллинге наш шарик остается на прежнем месте.
Background-attachment, scroll – изображение разблокировано (при прокрутке передвигается вместе со страницей). Пример 9-2, в нашей таблице стилей изменим значение fixed на scroll.
Сохраняем файл style. css и смотрим, что у нас получилось:
Как и в первом случае, браузер отобразил рисунок в левом верхнем углу. Попробуем передвинуть полосу прокрутки. Можете убедиться, что при скроллинге наш рисунок передвигается вместе со страницей.
Реклама
Рекламодатель: serm.moscow
