Високорівневі техніки для адаптивних фонових зображень
У цьому світі технологій, якщо ваша веб-сторінка не така ж реактивна, як добре навчений лабрадор, ви пропускаєте мету, мій другу! У цій главі ми поглибимося в мутні води CSS і вирішимо загадку, яка турбувала багатьох початківців веб-розробників: як створити реактивні фонові зображення? Справедливе попередження, ми збираємося трохи поглибитися в технології, так що пристібніться і готуйтеся до подорожі!
Що таке реактивні фонові зображення?
Перш ніж ми почнемо закликати закляття CSS, давайте визначимо, що ми маємо на увазі, коли говоримо про “реактивні фонові зображення”. Уявіть, що ви показуєте другові зображення вашої кішки на вашому новому, блискучому смартфоні. На вашому маленькому екрані телефону містер Пухнастик виглядає чарівно! Тепер ви вирішили показати ті ж самі зображення іншому другові, але цього разу на вашому ноутбуці. Проблема? Фото дійсно не поміщається на більшому екрані, і тепер містер Пухнастик виглядає менше як милий комочок хутра і більше як піксельний бардак. У світі веб-розробки ми маємо на меті уникнути таких модних катастроф! Реактивне зображення масштабується з розміром екрану, не жертвуючи якістю зображення.
Занурення в CSS
Зараз вас може захоплювати концепція реактивних фонових зображень, і ви питаєте себе, як я можу оживити цю концепцію? Відповідь полягає у нашому доброму старому другові під назвою “CSS”. За розумінням розробника – коли у сумніві, вирішуйте стиль!
Ось трохи кодового гумору для вас: Чому програмісти віддають перевагу розробці для iOS?
Тому що на iOS немає Windows або Gates.
Обіцяю, CSS цікавіший, ніж мої жарти!
Магічне заклинання властивості background-size
CSS, магічна паличка, яка перетворює жаб (тобто статичні веб-сторінки) в принців (тобто круті, динамічні веб-сторінки), має спеціальну властивість, відому як ‘background-size’. Це заклинання може перетворити неадаптивні фонові зображення в гнучкі. Як і більшість заклинань, в цьому є два магічних слова – “Cover” і “Contain”.
“Cover” гарантує, що ваше зображення покриє весь контейнер перегляду, навіть якщо йому доведеться розтягнути зображення або відрізати трохи з боків.
З іншого боку, опція “Contain” забезпечує, що весь малюнок завжди буде видно, навіть якщо залишить трохи додаткового місця по боках. Ви можете використовувати цю властивість так:
css
body {
background: url('адреса-зображення') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Хто б міг подумати, що з додаванням трішки креативності і щепотки магії CSS ви зможете створити дива на своїй веб-сторінці?!
Тепер, коли ми розгадали код створення реактивних фонових зображень, ви готові вийти на наступний рівень майстерності веб-розробника. Продовжуйте практикувати це нове вміння і станьте маестро у своєму домені. Але пам’ятайте, що велика сила приносить велику відповідальність! Використовуйте свою магію розумно!
До нашої наступної пригоди з кодування, веселого стилювання! Ваш шлях до становлення веб-розробником вже розпочався! Не забудьте відзначити ці перемоги, великі та малі. Все-таки, CSS може означати таблиці каскадних стилів, але це також може означати “Свята Точно Приносять Успіх”!
